.village-screen { --v-border:#d5c09224; --v-muted:#a4b2a6; --v-gold:#dfc38a; padding:0 max(28px,calc((100vw - 1440px)/2)); background:#19251f; color:#edece0; font-size:14px; }
.village-screen.green { --v-border:#d9ca8829; --v-muted:#b0bda3; --v-gold:#e1c270; background:#17271d; }
.village-screen.snow { --v-border:#aecce331; --v-muted:#adbec7; --v-gold:#b8d9ed; background:#1c2a36; }
.village-screen.citadel { --v-border:#b9cbe13d; --v-muted:#b6c4d3; --v-gold:#e6cd86; background:#202b3a; }
.village-screen.dusk { --v-border:#d79a7330; --v-muted:#c1a9ae; --v-gold:#e7a167; background:#281d29; }
.village-screen.snow .village-world,.village-screen.snow .village-mission { background:#1d303a; border-color:#9bc5dd38; }
.village-screen.snow .village-preparation { background:#162a354f; }
.village-screen.citadel .village-world,.village-screen.citadel .village-mission { background:#253447; border-color:#b9cee34a; }
.village-screen.citadel .village-preparation { background:#1c2a3b66; }
.village-screen.dusk .village-world,.village-screen.dusk .village-mission { background:#30222f; border-color:#d2807440; }
.village-screen.dusk .village-preparation { background:#351c294f; }
.village-screen.snow .village-map-label { background:#263d4beb; border-color:#b7d8e45e; }
.village-screen.citadel .village-map-label { background:#273b55ed; border-color:#d5e0ef66; }
.village-screen.dusk .village-map-label { background:#42283aeb; border-color:#e2a57561; }
.village-topbar { min-height:91px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--v-border); }
.village-brand { display:flex; align-items:center; gap:13px; color:#eee5c8; text-decoration:none; font:500 22px var(--serif); letter-spacing:.18em; }
.village-brand > span { color:var(--v-gold); font-size:33px; }
.village-brand small { display:block; margin-top:5px; font:10px var(--serif); letter-spacing:.25em; color:#b2b8a3; }
.village-date { display:flex; align-items:center; gap:17px; }
.village-date > span { max-width:100px; color:#acb5a5; font:9px/1.8 var(--serif); letter-spacing:.2em; }
.village-date strong { color:#eee0ba; font:34px var(--serif); }
.village-date strong small { font:10px var(--sans); color:#acb5a5; letter-spacing:.08em; }
.village-top-actions { display:flex; align-items:center; gap:8px; }
.village-top-actions .icon-button { width:34px; height:34px; background:transparent; border-color:var(--v-border); color:#c5cbb7; }
.village-coins { display:inline-block; min-width:70px; color:#eed098; font:22px var(--serif); white-space:nowrap; }
.village-coins small { font:11px var(--sans); color:#b9a782; }
.village-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:31px 0 25px; }
.village-screen .eyebrow { color:#a9bdab; font-size:9px; letter-spacing:.21em; }
.village-heading h1 { margin:9px 0 9px; font:500 clamp(22px,2.4vw,32px) var(--serif); letter-spacing:.08em; }
.village-heading p:not(.eyebrow) { margin:0; color:var(--v-muted); font-size:12px; line-height:1.8; }
.village-weather { display:grid; gap:5px; max-width:210px; color:var(--v-gold); font:12px/1.55 var(--serif); text-align:right; }
.village-weather small { color:var(--v-muted); font:9px var(--sans); letter-spacing:.16em; }
.village-layout { display:grid; grid-template-columns:minmax(0,1fr) 302px; gap:24px; align-items:start; }
.village-world { position:relative; min-width:0; border:1px solid #b2bf992d; background:#11221e; box-shadow:0 12px 40px #09151040; }
.village-map-wrap { position:relative; padding:0; background:#53715b; overflow:hidden; }
#village-canvas { display:block; width:100%; height:auto; aspect-ratio:640/416; image-rendering:pixelated; outline-offset:-3px; cursor:crosshair; }
.village-map-label { position:absolute; transform:translateX(-50%); min-height:27px; padding:4px 10px; border:1px solid #d4d3a955; border-radius:2px; background:#23372be8; box-shadow:0 3px 0 #16261b33,0 2px 8px #0003; color:#f1e5c1; font-size:11px; white-space:nowrap; cursor:pointer; }
.village-map-label i { margin-right:6px; color:#e5c88c; font-style:normal; }
.village-map-label:hover { background:#3d5039; border-color:#f2d99a; }
.village-map-label { z-index:2; }
.village-map-label.facility-forge { transform:translate(-50%,-60%); }
.village-map-label.facility-forge:active:not(:disabled) { transform:translate(-50%,-60%) translateY(1px); }
.village-map-label:active:not(:disabled) { transform:translateX(-50%) translateY(1px); }
.village-map-label.gate { padding:5px 13px; color:#f4e8c8; background:#2e4439ef; }
.village-map-label.npc-label { min-height:22px; padding:3px 7px; color:#edf0d8; font-size:10px; background:#21392cbd; border-color:#cad5b332; }
.village-map-label.npc-label i { margin:0 0 0 6px; color:#eddda3; }
.village-map-label.resident-label { background:#382f24d9; border-color:#d9b97855; }
.village-map-caption { position:absolute; bottom:0; left:0; right:0; padding:27px 17px 13px; pointer-events:none; background:linear-gradient(transparent,#102820bf); color:#e1e8cc; font:11px var(--serif); letter-spacing:.05em; }
.village-map-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px 14px; color:#99ad9d; font-size:10px; }
.village-map-footer kbd { display:inline-block; margin-right:4px; padding:3px 5px; border:1px solid #b4c7b529; border-radius:2px; color:#c5d0bf; font:9px var(--sans); }
.village-map-footer .ghost { padding:6px 10px; color:#c6d0bc; font-size:10px; }
.village-touch-controls { display:none; }
.village-sidebar { display:grid; gap:16px; }
.village-mission { padding:22px; border:1px solid #b8c3a635; background:#26352b; }
.village-mission h2 { margin:11px 0 12px; font:500 21px/1.6 var(--serif); letter-spacing:.025em; color:#f3e8cb; }
.village-mission-copy { color:#bcc7b8; font-size:12px; line-height:1.9; margin:0 0 19px; }
.village-deployment { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0 0 14px; padding:11px 12px; border:1px solid #e1bf7952; border-left:3px solid #d8b76f; background:#171f1a80; }
.village-deployment b { align-self:center; color:#f1d9a4; font:600 11px/1.4 var(--sans); letter-spacing:.08em; white-space:nowrap; }
.village-deployment span { color:#c3ccbb; font-size:10px; line-height:1.7; }
.village-deployment small { grid-column:1/-1; color:#929e91; font-size:9px; letter-spacing:.03em; }
.village-deployment.pair { border-left-color:#a99ae3; }
.village-deployment.pair b { color:#d4c8ff; }
.village-deployment.all-party { border-left-color:#cf758a; }
.village-deployment.all-party b { color:#f0b4c1; }
.village-request { display:grid; gap:4px; margin:0 0 16px; padding:10px 12px; color:#ddd6be; font-size:11px; line-height:1.7; background:#161b19a8; border-left:2px solid #d2a95f; }
.village-request b { color:#efcf87; font-size:9px; letter-spacing:.15em; }
.village-destination { display:flex; align-items:center; gap:11px; border-block:1px solid var(--v-border); padding:13px 0; }
.village-destination img { width:57px; height:61px; object-fit:cover; border:1px solid #d4c3944d; filter:saturate(.7); }
.village-destination small { font-size:9px; color:#adbaa9; }
.village-destination h3 { font:500 15px var(--serif); margin:5px 0; }
.village-destination span { font-size:10px; color:#adbaa9; }
.village-party { padding:15px 0 17px; }
.village-party > small { display:block; color:#abb9a7; font-size:9px; }
.village-party > div { display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
.village-party button,.village-party-member { display:flex; align-items:center; gap:5px; padding:0; border:0; background:none; color:#d4ddc9; font-size:10px; }
.village-party button { cursor:pointer; }
.village-party-member.pending { color:#aeb7ab; }
.village-party p { margin:2px 0 0; color:#d4ddc9; font-size:11px; }
.village-start { width:100%; min-height:43px; padding:11px 8px; font-size:12px; letter-spacing:.025em; border-radius:2px; background:#cfb47f; box-shadow:0 3px 12px #0002; }
.village-day-note { color:#b0bca8; text-align:center; font-size:9px; line-height:1.8; margin:11px 0 0; }
.village-preparation { padding:17px 18px 13px; border:1px solid var(--v-border); background:#12271d36; }
.village-preparation header { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.village-preparation h3 { font:500 14px var(--serif); margin:0; }
.village-preparation header > span { color:#c0c3a9; font-size:10px; }
.village-service-grid { margin-top:10px; }
.village-service-grid button { display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--v-border); background:none; text-align:left; cursor:pointer; }
.village-service-grid button:last-child { border-bottom:0; }
.village-service-grid button > b { width:24px; color:#c6b489; text-align:center; font-size:22px; font-weight:400; }
.village-service-grid button > span { flex:1; font-size:12px; color:#e0e2d0; }
.village-service-grid small { display:block; margin-top:4px; color:#9fac99; font-size:9px; }
.village-service-grid i { font-style:normal; color:#a5b69d; }
.village-preparation > p { border-top:1px solid var(--v-border); padding-top:12px; margin:4px 0 0; color:#acbaa5; font-size:9px; }
.village-timeline { display:flex; align-items:center; gap:24px; padding:22px 0 30px; margin-top:23px; border-top:1px solid var(--v-border); }
.village-timeline > div { flex:0 0 130px; }
.village-timeline .eyebrow { font-size:8px; }
.village-timeline > div > span { font:13px var(--serif); }
.village-timeline ol { position:relative; display:flex; flex:1; justify-content:space-between; list-style:none; margin:0; padding:0; }
.village-timeline ol:before { content:""; position:absolute; top:14px; height:1px; width:100%; background:#78877750; }
.village-timeline li { z-index:1; }
.village-timeline li button { width:29px; height:29px; border:1px solid #778c7440; border-radius:50%; background:#203229; color:#8e9f8c; font:11px var(--serif); cursor:pointer; }
.village-timeline li.current button { border-color:#e0c789; color:#f0dba6; box-shadow:0 0 0 4px #d9bb6720; }
.village-timeline li.complete button { border-color:#83ab82; background:#45624b; color:#ddecc8; }
.village-timeline .ghost { padding:9px 12px; color:#b7c7b1; font-size:10px; }
.village-screen button:disabled,.village-modal button:disabled { opacity:.43; cursor:default; }
.village-backdrop { background:#071310cc; backdrop-filter:none; }
.village-modal { width:min(650px,94vw); max-height:90dvh; overflow-y:auto; padding:25px; border:1px solid #aeb59a55; border-radius:4px; color:#e6e6d7; background:#26332b; box-shadow:0 6px 0 #09140eb3; }
.village-modal > header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:17px; border-bottom:1px solid #c6c9a827; }
.village-modal > header h2 { margin:0; font:500 22px var(--serif); }
.village-modal .eyebrow { color:#acbfaa; font-size:9px; }
.village-modal .ghost,.village-modal .icon-button { border-color:#b9c19e38; background:#10281e59; color:#e0ddc3; }
.village-service-intro,.village-service-note { margin:16px 0; color:#bac9b6; font-size:12px; line-height:1.9; }
.village-service-note { color:#a8b7a3; font-size:11px; }
.village-stock-row { display:flex; gap:13px; align-items:center; padding:14px 0; border-bottom:1px solid #c6c9a820; }
.village-stock-row > div { flex:1; min-width:0; }
.village-stock-row b { color:#e9e8d4; font-size:13px; font-weight:500; }
.village-stock-row small { display:block; margin-top:5px; color:#aabca6; font-size:11px; line-height:1.6; }
.village-stock-row .ghost { flex-shrink:0; padding:9px 10px; font-size:11px; }
.village-stock-row .icon-button { flex-shrink:0; width:32px; height:32px; }
.village-stash-tools { margin:14px 0 5px; padding:12px; display:grid; grid-template-columns:1fr 1.35fr 1fr auto; align-items:end; gap:8px; border:1px solid #c6c9a820; border-radius:5px; background:#0b1519aa; }.village-stash-tools label { display:grid; gap:5px; color:#aabca6; font-size:9px; letter-spacing:.08em; }.village-stash-tools input,.village-stash-tools select { width:100%; min-height:36px; padding:7px 9px; border:1px solid #c6c9a830; border-radius:4px; background:#101e23; color:#e9e8d4; }.village-stock-row .village-sell { color:#e7cd9a; border-color:#d6b76855; }
.village-item-icon { display:grid; place-items:center; flex:0 0 40px; height:40px; }
.village-item-icon .pixel-item-sprite { width:38px; height:38px; }
.village-shop-greeting { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; }
.village-shop-greeting > p { font:13px/1.9 var(--serif); color:#d9d5b6; }
.village-inline-primary { padding:12px 20px; }
.village-empty { padding:25px 10px; color:#b8c4af; font-size:13px; line-height:2; text-align:center; }
.village-forge-material { padding:11px; border:1px solid #c8bb7540; color:#e0cd9e; font-size:12px; background:#d8b46809; }
.village-dialogue-scene { display:flex; flex-direction:column; justify-content:space-between; gap:32px; min-height:160px; padding:18px 22px 10px; margin:19px -5px 0; background:radial-gradient(ellipse at 50% 120%,#bd995d55,transparent 65%),linear-gradient(#293c32,#142b22); border:1px solid #bdc6a626; }
.village-dialogue-scene.tomori { background:radial-gradient(ellipse at 50% 120%,#ded4b622,transparent 65%),linear-gradient(#47595d,#293e39); }
.village-dialogue-scene.akatsuki { background:radial-gradient(ellipse at 50% 120%,#bd995d66,transparent 65%),linear-gradient(#3b3644,#252a2b); }
.village-dialogue-scene > span { color:#c7ceb8; font-size:10px; letter-spacing:.15em; }
.village-dialogue-scene > div { display:flex; justify-content:center; gap:25px; }
.village-dialogue-copy { min-height:164px; padding:16px 3px 8px; }
.village-dialogue-copy .village-speaker { font-size:13px; font-weight:700; margin:0 0 12px; }
.village-dialogue-copy > p:last-child { font:500 16px/2.1 var(--serif); margin:0; color:#efeddd; }
.village-dialogue-footer { display:flex; align-items:center; gap:15px; justify-content:space-between; padding-top:16px; border-top:1px solid #bdc6a626; }
.village-dialogue-footer > span { color:#a7b7a1; font-size:11px; white-space:nowrap; }
.village-dialogue-footer button { padding:10px 15px; font-size:11px; }
.village-dialogue-footer .primary { min-width:110px; }
.village-portrait { position:relative; display:inline-block; flex-shrink:0; width:34px; height:40px; overflow:hidden; background:#14202a; border:1px solid #adc5a244; }
.village-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%; image-rendering:auto; }
.village-portrait.large { width:220px; height:290px; border-color:#cbb17e55; }
.village-npc-conversation { display:flex; gap:22px; align-items:center; padding:25px 5px; }
.village-npc-conversation > div > p:last-child { margin:7px 0 0; font:15px/2 var(--serif); }
.village-companion-help { padding:16px; border:1px solid #bdc6a626; background:#11291f55; }
.village-companion-help b { color:#e0cfa6; font-size:13px; }
.village-companion-help p { color:#c5d0ba; font-size:12px; }
.village-companion-help small { color:#a5b79e; }
.village-depart-title { font:500 25px var(--serif); }
.village-depart-title + p { font-size:13px; line-height:1.8; }
.village-depart-carry { padding:15px; border:1px solid #bdc6a626; }
.village-depart-carry h3 { margin:0 0 10px; font-size:13px; color:#dfcda4; }
.village-depart-carry p { font-size:12px; color:#becbb5; }
.village-depart-carry .ghost { padding:8px 12px; font-size:11px; }
.village-depart-allies > p { display:flex; align-items:center; gap:10px; }
.village-depart-allies b { font-size:12px; }
.village-depart-allies small { display:block; color:#b0bea6; font-size:11px; margin-top:4px; }
.village-party-picker { margin:16px 0; padding:14px; border:1px solid rgba(231,205,154,.25); background:rgba(20,28,24,.48); }
.village-party-picker h3 { margin:0 0 5px; font-size:13px; }
.village-party-picker p,.village-party-picker small { color:#b0bea6; font-size:11px; }
.village-party-picker > div { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.village-party-picker button { display:flex; align-items:center; gap:6px; }
.village-party-picker button.selected { border-color:#e7cd9a; color:#fff1c9; background:rgba(231,205,154,.14); }
.merchant-rare-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 8px; padding:9px 11px; border:1px solid rgba(231,205,154,.28); color:#e7cd9a; background:linear-gradient(90deg,rgba(231,205,154,.12),transparent); }
.merchant-rare-heading b { letter-spacing:.14em; font-size:10px; }
.merchant-rare-heading span { color:#aeb9aa; font-size:10px; text-align:right; }
.village-stock-row.rare-stock { position:relative; border-color:rgba(231,205,154,.42); background:linear-gradient(100deg,rgba(231,205,154,.1),rgba(35,30,50,.3)); }
.rare-stock-badge { align-self:flex-start; padding:3px 5px; border:1px solid rgba(231,205,154,.48); color:#ffe7aa; font-size:8px; letter-spacing:.12em; }
.village-journal-list > article { display:flex; gap:22px; padding:20px 0; border-bottom:1px solid #bdc6a626; }
.village-journal-list > article > span { font:28px var(--serif); color:#d6c18e; }
.village-journal-list h3 { margin:5px 0; font:500 16px var(--serif); }
.village-journal-list small { color:#a5b59e; font-size:10px; }
.village-journal-list p { margin:7px 0 10px; color:#b8c6ae; font-size:12px; line-height:1.8; }
.village-journal-list .ghost { margin:3px 5px 0 0; padding:7px 10px; font-size:10px; }
.village-journal-list .unread { opacity:.5; }
.village-afterstory-list { display:grid; gap:8px; }
.village-afterstory-list button { display:flex; justify-content:space-between; gap:15px; text-align:left; }
.village-afterstory-list small { font-size:10px; color:#b4bda0; }
.village-afterstory-title { font:500 18px var(--serif); margin:25px 0 15px; }
.village-result-reward { color:#dcc68e; font-size:12px; line-height:1.9; }
@media (min-width:1550px) { .village-layout { grid-template-columns:minmax(0,1fr) 330px; } .village-mission { padding:25px; } }
@media (max-width:1050px) { .village-screen { padding-inline:20px; } .village-layout { grid-template-columns:minmax(0,1fr) 270px; gap:16px; } .village-mission { padding:17px; } .village-timeline { gap:15px; } .village-timeline > div { flex-basis:95px; } .village-timeline > .ghost { display:none; } .village-map-footer { padding:10px; flex-wrap:wrap; } }
@media (max-width:800px) { .village-screen { padding-inline:16px; } .village-topbar { min-height:77px; } .village-brand { font-size:18px; gap:7px; } .village-brand > span { font-size:25px; } .village-date > span { display:none; } .village-date strong { font-size:27px; } .village-date strong small { font-size:9px; } .village-layout { grid-template-columns:1fr; } .village-sidebar { grid-template-columns:1fr 1fr; gap:14px; } .village-heading { padding:24px 0 20px; } .village-touch-controls { display:flex; justify-content:center; gap:12px; padding:0 12px 12px; } .village-touch-controls button { width:46px; height:38px; border:1px solid #bdc6a636; border-radius:3px; background:#263c2f; color:#ced9c1; } .village-timeline { margin-top:20px; } .village-timeline > div { display:none; } }
@media (max-width:540px) { .village-screen { padding-inline:12px; } .village-topbar { flex-wrap:wrap; gap:12px; padding:14px 0; } .village-brand { flex:1; } .village-date { order:2; } .village-top-actions { order:3; width:100%; justify-content:flex-end; } .village-top-actions .village-coins { margin-right:auto; } .village-heading { align-items:flex-start; } .village-heading h1 { font-size:23px; } .village-heading .eyebrow { font-size:8px; } .village-heading p:not(.eyebrow) { font-size:11px; } .village-weather { display:none; } .village-map-label { min-height:24px; padding:4px 7px; font-size:10px; } .village-map-label.npc-label { padding:3px 5px; font-size:9px; } .village-map-label i { margin-right:3px; } .village-map-caption { padding:18px 9px 8px; font-size:9px; } .village-map-footer > span { font-size:9px; } .village-sidebar { grid-template-columns:1fr; } .village-mission { padding:20px; } .village-mission h2 { font-size:22px; } .village-mission-copy { margin-bottom:12px; } .village-party { padding-block:12px; } .village-timeline li button { width:23px; height:23px; font-size:10px; } .village-timeline ol:before { top:11px; } .village-modal { padding:18px; max-height:92dvh; } .village-modal > header h2 { font-size:20px; } .village-stock-row { gap:8px; } .village-stock-row b { font-size:12px; } .village-stock-row small { font-size:10px; } .village-stock-row .ghost { font-size:10px; padding:8px; max-width:110px; } .village-stock-row .village-item-icon { flex-basis:27px; } .village-dialogue-copy { min-height:185px; } .village-dialogue-copy > p:last-child { font-size:15px; line-height:2; } .village-dialogue-footer { gap:8px; } .village-dialogue-footer button { padding:9px 10px; font-size:10px; } .village-dialogue-footer .primary { min-width:85px; } .village-afterstory-list button { flex-wrap:wrap; } }

/* Conversations use the village party sprites, at whole pixel multiples. */
.village-brand { font-family:var(--serif); font-size:23px; letter-spacing:.08em; }
.village-brand small { font-family:var(--sans); font-size:10px; letter-spacing:.05em; }
.village-date > span { font-family:var(--sans); font-size:11px; letter-spacing:.03em; }
.village-heading { padding-block:24px 20px; }
.village-heading > div { max-width:66ch; }
.village-screen .eyebrow { font-size:11px; letter-spacing:.05em; }
.village-map-label.npc-label { transform:translate(-50%,-100%); }
.village-map-label { box-shadow:0 2px #10201680; }
.village-map-label i { font-size:10px; }
.village-town-mood { margin:16px 0; padding:0; color:#c3c9b8; font:12px/1.9 var(--sans); }
.village-mission-copy { color:#d0d7c6; }
.village-service-grid button > b { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--v-border); font:14px var(--serif); }
.village-day-note,.village-preparation > p,.village-service-grid small { font-size:11px; line-height:1.8; }
.village-timeline li button { border-radius:2px; }
.village-timeline li.current button { box-shadow:0 2px #d9bb67; }
.village-story-modal { width:min(720px,94vw); background:#26332b; border-color:#89957b; }
.village-dialogue-scene { display:block; min-height:0; margin:16px 0 0; padding:0 0 14px; border:0; border-bottom:1px solid #bdc6a633; background:none; }
.village-dialogue-scene > span { color:#b8c4ae; font-size:11px; letter-spacing:.03em; }
.village-dialogue-scene > p { margin:6px 0 0; color:#d8ceac; font:14px var(--serif); }
.village-dialogue-body { display:flex; align-items:flex-start; gap:24px; padding-top:24px; }
.village-portrait { width:32px; height:40px; background:#1a2721; border:0; box-shadow:inset 0 -2px #87917055; }
.village-portrait canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
.village-portrait.dialogue-face { width:96px; height:120px; }
.village-portrait.large { width:128px; height:160px; }
.village-dialogue-copy { min-height:160px; flex:1; min-width:0; padding:0; }
.village-dialogue-copy > p:last-child { font:16px/2 var(--sans); line-break:strict; overflow-wrap:anywhere; }
.village-dialogue-copy .village-speaker { margin-bottom:10px; font-size:13px; }
.village-dialogue-footer { margin-top:16px; }
.village-npc-conversation { gap:24px; padding:24px 0; align-items:center; }
.village-npc-conversation > div { min-width:0; }
.village-npc-conversation > div > p:last-child { font:15px/2 var(--sans); }
.village-stash-tools { border-radius:2px; background:#1b2821; }
@media(max-width:540px) {
  .village-brand { font-size:21px; }
  .village-stash-tools { grid-template-columns:1fr 1fr; }
  .village-dialogue-body { gap:14px; padding-top:20px; }
  .village-portrait.dialogue-face { width:64px; height:80px; }
  .village-dialogue-copy { min-height:200px; }
  .village-dialogue-copy > p:last-child { font-size:14px; line-height:1.95; }
  .village-dialogue-copy .village-speaker { font-size:12px; }
  .village-npc-conversation { gap:16px; align-items:flex-start; }
  .village-portrait.large { width:64px; height:80px; }
  .village-npc-conversation > div > p:last-child { font-size:14px; }
  .village-timeline { gap:0; }
  .village-screen .eyebrow { font-size:10px; }
}

/* Village quality pass: make decisions and progress easy to scan at every size. */
.village-return-title { padding:7px 10px; font-size:10px; white-space:nowrap; }
.village-stash-return { width:100%; margin:4px 0 10px; padding:11px 14px; }
.village-item-detail { margin:18px 0; padding:17px; border:1px solid rgba(223,195,138,.28); background:linear-gradient(135deg,rgba(14,29,23,.72),rgba(41,52,42,.8)); }
.village-item-detail-head { display:flex; align-items:center; gap:14px; border-bottom:1px solid rgba(198,201,168,.16); padding-bottom:12px; }
.village-item-detail-head .village-item-icon { flex-basis:48px; height:48px; }
.village-item-detail h3 { margin:3px 0 0; color:#f1e6c9; font:500 19px var(--serif); }
.village-item-detail > p { margin:14px 0 0; color:#c7d0bd; font-size:13px; line-height:1.9; }
.village-item-detail ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 16px; margin:14px 0 0; padding:11px 0 0; list-style:none; border-top:1px solid rgba(198,201,168,.16); color:#d9d4b7; font-size:12px; }
.village-item-detail li::before { content:"◆"; margin-right:7px; color:var(--v-gold); font-size:8px; }
.village-item-detail .village-item-value { color:#edcf8e; }
.village-item-effects { margin-top:14px; padding-top:13px; border-top:1px solid rgba(198,201,168,.16); }
.village-item-effects h4 { margin:0 0 8px; color:#e6d3a0; font:500 12px var(--sans); letter-spacing:.06em; }
.village-item-effects ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.village-item-effects li { display:grid; gap:3px; padding:9px 10px; border-left:2px solid rgba(223,195,138,.48); background:rgba(8,20,14,.28); color:#c5d0bd; font-size:11px; line-height:1.65; }
.village-item-effects li b { color:#ece3c7; font-weight:500; }
.village-item-effects li span { display:block; }
.village-confirm-copy { margin:18px 0; padding:13px 15px; border-left:3px solid #d9bb67; background:rgba(217,187,103,.09); color:#d9dfca; font-size:13px; line-height:1.9; }
.village-confirm-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:15px; border-top:1px solid rgba(198,201,168,.2); }
.village-confirm-actions button { min-height:40px; padding:9px 15px; }
.village-dialogue-controls { display:flex; gap:8px; }
.village-journal-overview { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:18px 0; padding:17px; border:1px solid rgba(223,195,138,.32); background:linear-gradient(115deg,rgba(223,195,138,.13),rgba(24,42,32,.38)); }
.village-journal-overview h3,.village-journal-relics h3 { margin:4px 0 7px; color:#f0e1b4; font:500 20px var(--serif); }
.village-journal-overview p:not(.eyebrow),.village-journal-relics > div > p:last-child { margin:0; color:#bdc8b6; font-size:12px; line-height:1.8; }
.village-journal-overview .ghost { flex-shrink:0; padding:10px 12px; font-size:11px; }
.village-recovery-link { margin-bottom:12px; }
.village-journal-relics { margin:20px 0; padding:17px; border:1px solid rgba(198,201,168,.2); background:#17261e; }
.village-journal-empty { color:#b8c5b4; }
.village-relic-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.village-relic-list > div { display:flex; gap:9px; min-width:0; padding:10px; border:1px solid rgba(198,201,168,.16); background:rgba(8,20,14,.36); }
.village-relic-list > div.acquired { border-color:rgba(223,195,138,.36); background:rgba(223,195,138,.06); }
.village-relic-list > div > span { color:#dfc38a; line-height:1.35; }
.village-relic-list b,.village-relic-list small { display:block; }
.village-relic-list b { color:#e9e5cd; font-size:12px; font-weight:500; }
.village-relic-list small { margin-top:4px; color:#aebba9; font-size:10px; line-height:1.6; }
.village-journal-chapters { display:grid; gap:16px; }
.village-journal-chapter { border:1px solid rgba(198,201,168,.18); background:rgba(10,24,17,.26); }
.village-journal-chapter > header { display:flex; align-items:baseline; gap:10px; padding:12px 15px; border-bottom:1px solid rgba(198,201,168,.16); background:rgba(223,195,138,.06); }
.village-journal-chapter > header .eyebrow { margin:0; color:#d6bf82; }
.village-journal-chapter > header h3 { margin:0; color:#e9e3c9; font:500 16px var(--serif); }
.village-journal-chapter > header span { margin-left:auto; color:#aebba9; font-size:10px; }
.village-journal-list { padding:0 15px; }
.village-journal-list > article { padding:15px 0; }
.village-journal-list > article.current { border-left:2px solid #d9bb67; padding-left:11px; margin-left:-13px; }
.village-journal-list > article.complete .village-journal-index { color:#f5e1a7; border-color:#d9bb67; }
.village-journal-index { display:grid; place-items:center; flex:0 0 30px; height:30px; border:1px solid rgba(198,201,168,.32); color:#bdc9b7; font:12px var(--serif); }
.village-journal-list h4 { margin:4px 0; color:#ebe7d5; font:500 16px var(--serif); }
.village-journal-list .unread { opacity:.62; }
.village-journal-actions { display:flex; flex-wrap:wrap; gap:6px; }
.village-journal-actions .ghost { margin:0; }
@media(max-width:700px) {
  .village-return-title { order:-1; margin-right:auto; }
  .village-relic-list { grid-template-columns:1fr; }
  .village-journal-overview { align-items:flex-start; flex-direction:column; }
  .village-journal-overview .ghost { width:100%; }
}
@media(max-width:540px) {
  .village-top-actions { gap:6px; }
  .village-return-title { font-size:9px; }
  .village-stock-row { align-items:flex-start; flex-wrap:wrap; padding:13px 0; }
  .village-stock-row > div { min-width:calc(100% - 42px); }
  .village-stock-row .ghost { max-width:none; }
  .village-stock-row .icon-button { margin-top:-3px; }
  .village-item-detail { padding:13px; }
  .village-item-detail ul { grid-template-columns:1fr; }
  .village-confirm-actions { flex-direction:column-reverse; }
  .village-confirm-actions button { width:100%; }
  .village-dialogue-footer { align-items:stretch; flex-wrap:wrap; }
  .village-dialogue-footer > span { margin-right:auto; padding-top:10px; }
  .village-dialogue-controls { width:100%; }
  .village-dialogue-controls button { flex:1; }
  .village-journal-overview,.village-journal-relics { padding:14px; }
  .village-journal-chapter > header { padding:11px 12px; }
  .village-journal-list { padding:0 12px; }
  .village-journal-list > article { gap:11px; }
  .village-journal-list h4 { font-size:15px; }
  .village-journal-actions { display:grid; grid-template-columns:1fr 1fr; }
  .village-journal-actions .ghost { width:100%; padding:8px 6px; font-size:9px; }
}
/* Directed conversations share the village palette and preserve the pixel art. */
.village-story-modal.directed-story{position:relative;width:min(760px,100%);max-height:calc(100dvh - 32px);padding:0;overflow:auto;border-color:#7f7457;background:#101923;box-shadow:0 32px 100px #000b}
.directed-story .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.directed-story>header{padding:16px 24px;margin:0;background:#101923;gap:12px}
.directed-story>header h2{font-size:17px;letter-spacing:.08em}
.dialogue-stage{position:relative;height:238px;overflow:hidden;background:#15252a}
.dialogue-stage>canvas{display:block;width:100%;height:100%;object-fit:cover;object-position:center 66%;image-rendering:pixelated}
[data-scene="illustration"] .dialogue-stage{height:280px}
[data-scene="illustration"] .dialogue-stage>canvas{object-position:center top;image-rendering:auto}
.dialogue-scene-caption{position:absolute;inset:0 0 auto;padding:15px 24px 35px;background:linear-gradient(#09121ddd,transparent);text-shadow:0 2px 5px #000}
.dialogue-scene-caption span{font-size:11px;letter-spacing:.15em;color:#e0c999}
.dialogue-scene-caption p{margin:5px 0;color:#e4e9ec;font-size:13px}
.dialogue-scene-rule{position:absolute;bottom:0;height:2px;left:0;right:0;background:linear-gradient(90deg,transparent,var(--speaker-color),transparent)}
.directed-dialogue.village-dialogue-body{padding:18px 28px 8px;min-height:176px;display:block;margin:0;background:radial-gradient(ellipse at 20% 0%,#29334055,transparent 65%)}
.directed-dialogue .village-dialogue-copy{width:100%;min-width:0}
.directed-dialogue .village-speaker{color:var(--speaker-color);font-size:15px;letter-spacing:.12em;margin:0 0 10px;font-weight:800}
.dialogue-text-area{position:relative;cursor:pointer;min-height:86px}
.dialogue-spoken{white-space:pre-wrap;font-size:17px;line-height:1.95;letter-spacing:.035em;margin:0;padding-right:16px;color:#f3efe6;overflow-wrap:anywhere}
.directed-story [data-dialogue-hint]{display:block;text-align:right;font-size:10px;color:#96a6b3;margin-top:6px}
.dialogue-continue{position:absolute;right:0;bottom:4px;font-size:9px;color:var(--speaker-color);animation:dialogue-breathe 1.6s ease-in-out infinite}
[data-revealing="true"] .dialogue-continue{visibility:hidden}
.dialogue-tools{display:flex;align-items:center;gap:8px;padding:6px 24px 12px;border-bottom:1px solid #cbb47720}
.dialogue-tools .ghost{font-size:11px;padding:6px 10px;min-height:34px}
.dialogue-tools [aria-pressed="true"]{border-color:#d0b77b;color:#eddba9;background:#6b57302e}
.dialogue-tools>span{margin-left:auto;font:11px monospace;color:#b5b9b7}
.directed-story .village-dialogue-footer{padding:14px 24px;margin:0;gap:12px;background:#0c141c}
.directed-story .village-dialogue-controls .primary{min-width:126px}
.dialogue-log{position:absolute;inset:65px 0 0;z-index:3;padding:16px 24px;background:#101923fa;overflow:auto;backdrop-filter:blur(8px)}
.dialogue-log[hidden]{display:none}
.dialogue-log>header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-16px;background:#101923;padding:12px 0;border-bottom:1px solid #8e795b66}
.dialogue-log h3{font-size:17px;margin:0}.dialogue-log ol{list-style:none;margin:8px 0;padding:0}
.dialogue-log li{padding:15px 0;border-bottom:1px solid #ffffff13}.dialogue-log b{font-size:12px;color:#e0c999}.dialogue-log p{font-size:15px;line-height:1.9;margin:6px 0 0;white-space:pre-wrap}
.dialogue-companion-help{font-size:12px;color:#b6c4ce;margin-top:10px}.dialogue-companion-help p{line-height:1.8}
/* The global menu size preference predates this dedicated conversation layout.
   Apply it here too, including to the read-back sheet. */
html[data-text-scale="1.15"] .directed-story .dialogue-spoken{font-size:19px}
html[data-text-scale="1.3"] .directed-story .dialogue-spoken{font-size:22px}
html[data-text-scale="1.15"] .directed-story .dialogue-log p{font-size:17px}
html[data-text-scale="1.3"] .directed-story .dialogue-log p{font-size:19px}
html[data-high-contrast="true"] .directed-story{border-color:#d7d4b2;background:#0a1119}
html[data-high-contrast="true"] .directed-story .dialogue-spoken{color:#fffdf4}
html[data-high-contrast="true"] .directed-story .dialogue-scene-caption{background:linear-gradient(#050a10ee,transparent)}
@keyframes dialogue-breathe{50%{opacity:.35;transform:translateY(2px)}}
@media(max-width:600px){.village-story-modal.directed-story{max-height:calc(100dvh - 16px)}.directed-story>header{padding:12px 16px}.directed-story>header h2{font-size:15px}.dialogue-stage{height:190px}.dialogue-scene-caption{padding:12px 16px}.directed-dialogue.village-dialogue-body{padding:16px 18px 8px;min-height:190px}.dialogue-spoken{font-size:15px;line-height:1.85}.dialogue-tools{padding:6px 16px 10px;gap:4px}.directed-story .village-dialogue-footer{padding:12px 16px;flex-wrap:wrap}.directed-story .village-dialogue-footer>button{font-size:12px}.directed-story .village-dialogue-controls{margin-left:auto}.directed-story .village-dialogue-controls .primary{min-width:102px}.dialogue-log{inset:60px 0 0;padding:12px 18px}html[data-text-scale="1.15"] .directed-story .dialogue-spoken{font-size:17px}html[data-text-scale="1.3"] .directed-story .dialogue-spoken{font-size:19px}html[data-text-scale="1.15"] .directed-story .dialogue-log p{font-size:16px}html[data-text-scale="1.3"] .directed-story .dialogue-log p{font-size:18px}}
@media(max-height:660px){.dialogue-stage{height:150px}.directed-dialogue.village-dialogue-body{min-height:130px;padding-top:12px}.dialogue-text-area{min-height:60px}.directed-story>header{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.dialogue-continue{animation:none}}
@media(max-width:600px){[data-scene="illustration"] .dialogue-stage{height:210px}}
@media(max-height:660px){[data-scene="illustration"] .dialogue-stage{height:170px}}
:root[data-reduced-motion="true"] .dialogue-continue{animation:none}

@media(max-width:600px){
  .village-modal:has(.village-depart-title) { max-height:calc(100dvh - 16px); }
  .village-modal:has(.village-depart-title) .modal-body { padding:11px; }
  .village-modal:has(.village-depart-title) .eyebrow { margin:0 0 4px; font-size:8px; }
  .village-depart-title { margin:3px 0 5px; font-size:19px; }
  .village-depart-title + p { margin:4px 0 8px; font-size:10px; line-height:1.45; }
  .village-modal:has(.village-depart-title) .village-destination { margin-block:7px; min-height:66px; }
  .village-modal:has(.village-depart-title) .village-destination img { width:90px; }
  .village-modal:has(.village-depart-title) .village-destination h3 { margin:2px 0; font-size:14px; }
  .village-modal:has(.village-depart-title) .village-request,
  .village-modal:has(.village-depart-title) .village-service-note { margin:6px 0; padding:7px; font-size:9px; line-height:1.45; }
  .village-modal:has(.village-depart-title) .village-confirm-actions { margin-top:8px; }
}

/* Live-map conversations: the settlement remains the scene and only the
   lower dialogue window overlays it. */
#modal-root .village-field-backdrop{place-items:end center;padding:20px 28px max(20px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent 0 42%,rgba(3,8,12,.22) 65%,rgba(3,8,12,.72) 100%);backdrop-filter:none}
.village-story-modal.directed-story.village-field-dialogue{width:min(980px,calc(100vw - 48px));max-height:min(390px,48dvh);overflow:auto;border-color:#d5bd7c99;background:linear-gradient(105deg,#0c151ef7,#18251ff2);box-shadow:0 15px 60px #000c,0 0 0 1px #080c10}
.village-field-dialogue>header{min-height:44px;padding:8px 16px;border-bottom:1px solid #ccb87833;background:#0b141beb}
.village-field-dialogue>header h2{font-size:14px}
.field-dialogue-context{display:flex;align-items:center;gap:12px;padding:6px 18px;border-bottom:1px solid #d7c78b24;background:#1f2c25d9}
.field-dialogue-context span{color:#d8c58e;font-size:10px;letter-spacing:.12em}
.field-dialogue-context p{margin:0;color:#b9c5ba;font-size:11px}
.village-field-dialogue .directed-dialogue.village-dialogue-body{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;min-height:148px;padding:12px 22px 6px;background:radial-gradient(ellipse at 8% 65%,color-mix(in srgb,var(--speaker-color) 18%,transparent),transparent 42%)}
.field-dialogue-portrait{position:relative;align-self:end;width:112px;height:144px;overflow:hidden;border:1px solid color-mix(in srgb,var(--speaker-color) 55%,#887b5d);border-bottom:0;background:#111d25;box-shadow:inset 0 0 24px #0008;animation:field-portrait-arrive .24s ease-out both}
.field-dialogue-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 68%,#0c151e99)}
.field-dialogue-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.field-dialogue-resident{display:flex;align-items:center;justify-content:center;background:linear-gradient(#17232c,#0d151c)}
.field-dialogue-resident i{display:block;width:100%;aspect-ratio:1;background-repeat:no-repeat;background-size:400% 300%}
.field-dialogue-narrator{align-self:center;width:80px;height:80px;display:grid;place-items:center;margin:auto;border:1px solid #d2bd7a55;border-radius:50%;color:#e5d393;background:radial-gradient(circle,#9b7f4133,transparent 68%);font-size:24px}
.village-field-dialogue .village-dialogue-copy{min-height:0;padding-top:5px}
.village-field-dialogue .dialogue-text-area{min-height:72px}
.village-field-dialogue .dialogue-spoken{font-size:17px;line-height:1.85}
.village-field-dialogue .dialogue-tools{padding:4px 20px 7px}
.village-field-dialogue .village-dialogue-footer{padding:8px 20px}
.story-event-active .village-map-label,.story-event-active>.touch-controls{opacity:0;pointer-events:none}
@keyframes field-portrait-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media(max-width:600px){
  #modal-root .village-field-backdrop{padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .village-story-modal.directed-story.village-field-dialogue{width:100%;max-height:52dvh}
  .village-field-dialogue .directed-dialogue.village-dialogue-body{grid-template-columns:76px minmax(0,1fr);gap:11px;min-height:126px;padding:9px 12px 4px}
  .field-dialogue-portrait{width:76px;height:108px}.field-dialogue-narrator{width:58px;height:58px;font-size:19px}
  .village-field-dialogue .dialogue-text-area{min-height:78px}.village-field-dialogue .dialogue-spoken{font-size:14px;line-height:1.75}
  .village-field-dialogue .dialogue-tools{padding:3px 12px 5px}.village-field-dialogue .village-dialogue-footer{padding:7px 12px}
}
@media(max-height:620px){.village-story-modal.directed-story.village-field-dialogue{max-height:60dvh}.village-field-dialogue>header{display:none}.field-dialogue-context{padding-block:4px}.village-field-dialogue .directed-dialogue.village-dialogue-body{min-height:112px}.field-dialogue-portrait{height:104px}.village-field-dialogue .dialogue-text-area{min-height:58px}}
@media(prefers-reduced-motion:reduce){.field-dialogue-portrait{animation:none}}
:root[data-reduced-motion="true"] .field-dialogue-portrait{animation:none}

/* Story dialogue always uses a compact lower window. The live map remains
   visible; illustrated cues temporarily replace it with a full-screen scene. */
#modal-root .village-field-backdrop{padding:0 24px max(14px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent 0 62%,rgba(2,7,10,.16) 74%,rgba(2,7,10,.7) 100%)}
.village-story-modal.directed-story.village-field-dialogue{width:min(1040px,calc(100vw - 48px));max-height:min(280px,34dvh);overflow:auto}
.village-field-dialogue>header{display:none}
.field-dialogue-context{min-height:27px;padding:4px 14px;gap:10px}
.village-field-dialogue .directed-dialogue.village-dialogue-body{grid-template-columns:72px minmax(0,1fr);gap:13px;min-height:88px;padding:7px 16px 3px}
.field-dialogue-portrait{width:72px;height:88px}
.field-dialogue-narrator{width:50px;height:50px;font-size:17px}
.village-field-dialogue .village-dialogue-copy{padding-top:1px}
.directed-dialogue .village-speaker{font-size:13px;margin-bottom:4px}
.village-field-dialogue .dialogue-text-area{min-height:42px}
.village-field-dialogue .dialogue-spoken{font-size:15px;line-height:1.65}
.directed-story [data-dialogue-hint]{height:12px;margin:0;font-size:9px}
.village-field-dialogue .dialogue-tools{padding:2px 14px 4px}
.dialogue-tools .ghost{min-height:28px;padding:4px 8px;font-size:10px}
.village-field-dialogue .village-dialogue-footer{min-height:38px;padding:5px 14px}
.village-field-dialogue .village-dialogue-footer button{padding:6px 10px}
.directed-story .village-dialogue-controls .primary{min-width:96px}
.village-field-dialogue .dialogue-log{inset:27px 0 0}

#modal-root .illustration-backdrop{overflow:hidden;background:#05090e;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.illustration-backdrop>.dialogue-stage{position:absolute;z-index:0;inset:0;width:100%;height:100%;background:#05090e}
.illustration-backdrop>.dialogue-stage>canvas{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;image-rendering:auto}
.illustration-backdrop.pixel-event-backdrop>.dialogue-stage>canvas{image-rendering:pixelated}
.illustration-backdrop>.dialogue-stage .dialogue-scene-caption{padding:22px clamp(18px,4vw,58px) 60px;background:linear-gradient(#03070bbd,transparent);pointer-events:none}
.illustration-backdrop>.village-story-modal{position:relative;z-index:1}
.illustration-backdrop .village-illustrated-dialogue{background:linear-gradient(105deg,#0a131cf7,#17231ef4)}

@media(max-width:600px){
  #modal-root .village-field-backdrop{padding:0 7px max(7px,env(safe-area-inset-bottom))}
  .village-story-modal.directed-story.village-field-dialogue{max-height:min(255px,36dvh)}
  .field-dialogue-context{min-height:24px;padding:3px 9px;white-space:nowrap;overflow:hidden}
  .field-dialogue-context span{font-size:8px}.field-dialogue-context p{font-size:9px;overflow:hidden;text-overflow:ellipsis}
  .village-field-dialogue .directed-dialogue.village-dialogue-body{grid-template-columns:54px minmax(0,1fr);gap:8px;min-height:76px;padding:5px 9px 2px}
  .field-dialogue-portrait{width:54px;height:72px}.field-dialogue-narrator{width:42px;height:42px;font-size:15px}
  .directed-dialogue .village-speaker{font-size:11px;margin-bottom:2px}
  .village-field-dialogue .dialogue-text-area{min-height:40px}
  .village-field-dialogue .dialogue-spoken{font-size:13px;line-height:1.55}
  .directed-story [data-dialogue-hint]{height:10px;font-size:8px}
  .village-field-dialogue .dialogue-tools{padding:2px 8px 3px}.dialogue-tools .ghost{min-height:25px;padding:3px 6px;font-size:9px}
  .village-field-dialogue .village-dialogue-footer{min-height:34px;padding:4px 8px;flex-wrap:nowrap}
  .village-field-dialogue .village-dialogue-footer>button{font-size:9px}.village-field-dialogue .village-dialogue-controls{display:flex;margin-left:auto}
  .village-field-dialogue .village-dialogue-footer button{padding:5px 7px}.directed-story .village-dialogue-controls .primary{min-width:78px}
  .illustration-backdrop>.dialogue-stage .dialogue-scene-caption{padding:16px 14px 48px}
}
@media(max-height:620px){
  .village-story-modal.directed-story.village-field-dialogue{max-height:44dvh}
  .village-field-dialogue .directed-dialogue.village-dialogue-body{min-height:70px}
  .field-dialogue-portrait{height:68px}
}