/* Resident conversation: full-body resident beside a framed parchment panel (same wood, gold and
   leaf-green language as the shop), wooden name plate, speech bubble and service buttons. */
.city-npc-dialog{--npc-glow:#ffe3a3;--npc-ink:#4a3526;--npc-muted:#8b7358;--npc-gold:#d2a654;--npc-green:#2f5b3e;--npc-green-dark:#1f3d2a;box-sizing:border-box;width:min(780px,calc(100vw - 28px));max-width:none;max-height:none;margin:auto;padding:0;overflow:visible;border:0;background:transparent;color:var(--npc-ink);font:14px/1.6 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif}
.city-npc-dialog[open]{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:end}
.city-npc-dialog[data-npc=chef]{--npc-glow:#ffcf92}.city-npc-dialog[data-npc=merchant]{--npc-glow:#d9ef9c}.city-npc-dialog[data-npc=weaponsmith]{--npc-glow:#d6dfeb}.city-npc-dialog[data-npc=guild-officer]{--npc-glow:#b9ddff}.city-npc-dialog[data-npc=teacher]{--npc-glow:#e3cbff}.city-npc-dialog[data-npc=tailor]{--npc-glow:#ffc6d6}
.city-npc-dialog *,.city-npc-dialog *::before,.city-npc-dialog *::after{box-sizing:border-box}
.city-npc-dialog::backdrop{background:radial-gradient(ellipse at 50% 58%,#10261d38,#07110dc4 78%);backdrop-filter:blur(2px)}
/* The resident: standing art on a soft coloured glow, feet on a small shadow. */
.city-npc-figure{position:relative;z-index:2;align-self:end;display:grid;place-items:end center;height:330px;margin:0 -34px 0 0;pointer-events:none}
.city-npc-figure::before{content:'';position:absolute;left:50%;bottom:40px;width:240px;height:240px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--npc-glow) 0,color-mix(in srgb,var(--npc-glow) 45%,#fff0) 42%,#fff0 70%);opacity:.9}
.city-npc-figure::after{content:'';position:absolute;left:50%;bottom:8px;width:128px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#0b1a1266 0,#0b1a1200 70%)}
.city-npc-portrait{position:absolute;inset:0 0 14px;z-index:1;display:flex;align-items:flex-end;justify-content:center;font-size:64px;color:#fff3d6}
.city-npc-portrait img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 8px 10px #1a2a1f55);user-select:none}
/* The framed panel. */
.city-npc-panel{position:relative;display:flex;flex-direction:column;min-width:0;max-height:min(86dvh,600px);padding:34px 22px 18px 50px;border:3px solid var(--npc-gold);border-radius:22px;background:radial-gradient(ellipse at 30% 0,#fffaf0,#0000 60%),linear-gradient(170deg,#fbf3e3,#f1e3c6);box-shadow:0 0 0 6px var(--npc-green),0 0 0 8px #173020,inset 0 0 0 4px #fffaf0,inset 0 0 0 5px #e4cf9f,0 26px 80px #050907d0}
.city-npc-header{position:absolute;left:34px;right:14px;top:-30px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}
.city-npc-heading{min-width:0;max-width:calc(100% - 60px);padding:7px 26px 9px;border:3px solid var(--npc-gold);border-radius:16px 16px 14px 14px;background:repeating-linear-gradient(0deg,#ffffff08 0 3px,#0000 3px 8px),linear-gradient(#83582f,#5d3a20 70%,#4a2d18);color:#fff1d2;box-shadow:inset 0 0 0 2px #5d3b22,inset 0 0 0 4px #c49a5566,0 4px 0 #34200f,0 10px 16px #0006;pointer-events:auto}
.city-npc-heading h2{margin:0;font-size:26px;font-weight:900;line-height:1.15;letter-spacing:.01em;text-shadow:0 2px 0 #34200f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-npc-role{order:-1;margin:0 0 1px;font-size:12px;font-weight:700;color:#efd39a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-npc-heading{display:flex;flex-direction:column}
.city-npc-dialog .city-npc-close{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0 0 3px;border:3px solid var(--npc-gold);border-radius:50%;background:linear-gradient(#83582f,#4a2d18);color:#fff1d2;font:900 26px/1 Tahoma,sans-serif;box-shadow:0 3px 0 #34200f,0 6px 12px #0005;pointer-events:auto}
.city-npc-dialog .city-npc-close:hover:not(:disabled){background:linear-gradient(#95663a,#5d3a20);border-color:#f0c75e}
/* Speech bubble with a tail toward the resident. */
.city-npc-scroll{min-height:0;overflow:auto;margin:0 -8px;padding:4px 8px 2px;scrollbar-width:thin;scrollbar-color:#c9a55a #0000}
.city-npc-greeting{position:relative;margin:6px 0 0;padding:15px 20px 15px 44px;border:1px solid #dcc39a;border-radius:14px;background:#fffbf2;font-size:15px;line-height:1.85;color:var(--npc-ink);box-shadow:inset 0 0 0 3px #fff6e6,0 2px 0 #dcc39a}
.city-npc-greeting::before{content:'';position:absolute;left:-8px;top:24px;width:14px;height:14px;border-left:1px solid #dcc39a;border-bottom:1px solid #dcc39a;background:#fffbf2;transform:rotate(45deg)}
.city-npc-greeting::after{content:'\201C';position:absolute;left:12px;top:2px;font:900 44px/1 Georgia,serif;color:var(--npc-gold);opacity:.55}
/* Buttons. */
.city-npc-footer{display:flex;align-items:center;gap:10px;margin-top:16px}
.city-npc-actions{display:flex;flex-wrap:wrap;gap:9px;flex:1;min-width:0}
.city-npc-actions:empty{display:none}
.city-npc-dialog button{min-height:44px;padding:10px 16px;border:2px solid #d6bd8c;border-radius:12px;color:var(--npc-ink);background:linear-gradient(#fffaf0,#f3e5c7);font:800 14px/1.2 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;cursor:pointer;box-shadow:0 2px 0 #cfb17a}
.city-npc-dialog button:hover:not(:disabled){border-color:var(--npc-gold);background:linear-gradient(#fffdf6,#f7ebd1)}
.city-npc-dialog button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #cfb17a}
.city-npc-dialog button:focus-visible,.city-npc-prompt:focus-visible{outline:3px solid #f0c75e;outline-offset:3px}
.city-npc-dialog button:disabled{opacity:.5;cursor:default}
.city-npc-dialog .city-npc-primary{display:inline-flex;align-items:center;gap:10px;padding:11px 22px 11px 16px;border-color:var(--npc-gold);background:linear-gradient(#4b8559,#2f5b3e 55%,#264c33);color:#fff6df;text-shadow:0 1px 0 #152a1c;box-shadow:inset 0 1px 0 #7fb489,0 3px 0 var(--npc-green-dark),0 6px 14px #1f3d2a55}
.city-npc-dialog .city-npc-primary:hover:not(:disabled){background:linear-gradient(#56946a,#356747 55%,#2a5539);border-color:#f0c75e}
.city-npc-dialog .city-npc-primary:active:not(:disabled){box-shadow:inset 0 1px 0 #7fb489,0 1px 0 var(--npc-green-dark)}
.city-npc-dialog .city-npc-fashion::before{content:'✿';content:'✿'/'';flex:none;color:#ffd6e2;font-size:20px;line-height:1}
.city-npc-dialog .city-npc-shop::before{content:'';flex:none;width:22px;height:22px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe7a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-1.6 10.2a2 2 0 0 1-2 1.8H7.6a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8.5 9 11 3.5M15.5 9 13 3.5'/%3E%3Cpath d='M9.5 13v4M14.5 13v4'/%3E%3C/svg%3E")}
.city-npc-dialog .city-npc-farewell{margin-left:auto;min-height:40px;padding:8px 14px;border-color:#0000;background:none;box-shadow:none;color:var(--npc-muted);font-weight:700}
.city-npc-dialog .city-npc-farewell:hover:not(:disabled){border-color:#dcc39a;background:#fffaf0}
.city-npc-message{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:#7a5f33}
.city-npc-message:empty{display:none}
/* Guild and school content inside the panel. */
.city-npc-membership{margin:16px 0 0;font-size:14px;font-weight:800;color:var(--npc-green)}
.city-npc-wallet{margin:4px 0 0;font-size:12.5px;color:#806932}
.city-npc-quest,.city-npc-profession{margin-top:10px;padding:13px 15px;border:1px solid #dcc9a0;border-radius:12px;background:#fffdf7;box-shadow:0 2px 0 #e3d0a8}
.city-npc-quest h3{font-size:15px;margin:0 0 6px}.city-npc-quest p{margin:6px 0;font-size:12.5px;line-height:1.65}.city-npc-quest .city-npc-cost{font-weight:700}.city-npc-quest button{margin-top:8px}
.city-npc-quest[data-completed=true]{background:#eef3e4;border-color:#c5d4b0}
.city-npc-reward{color:#377254}
.city-npc-school-note{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:#736544}
.city-npc-profession[data-selected=true]{border-color:#4c8b70;background:#e8f1e1;box-shadow:inset 0 0 0 1px #4c8b70,0 2px 0 #b9d0ae}
.city-npc-profession p{font-size:12.5px;line-height:1.7;margin:8px 0 0}
.city-npc-dialog .city-npc-profession-name{width:100%;min-height:32px;padding:0;border:0;background:transparent;box-shadow:none;text-align:left;font-size:16px}
.city-npc-dialog .city-npc-profession-name:disabled{opacity:1}
.city-npc-profession .city-npc-perk{font-weight:700;color:#8a5a1c}
/* NPC dialogs (item 30): full-width choices (44px+ to tap), locked/received notes, a guild quest card, the
   emotion label over the standing picture, and line breaks the admin typed. */
.city-npc-dialog[data-dialog-id] .city-npc-greeting{white-space:pre-line}
.city-npc-choices{display:grid;gap:8px;margin-top:12px}
.city-npc-dialog .city-npc-choice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:3px;width:100%;min-height:46px;padding:9px 14px;text-align:left;font-weight:800;line-height:1.45}
.city-npc-choice-key{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--npc-green);color:#fff6df;font-size:12px;font-weight:900}
.city-npc-choice-text{min-width:0;overflow-wrap:anywhere}
.city-npc-choice-note,.city-npc-choice-quest{grid-column:2;font-size:12px;font-weight:700;line-height:1.5}
.city-npc-choice-note{color:#9a5a2c}
.city-npc-dialog .city-npc-choice[data-locked=true],.city-npc-dialog .city-npc-choice[data-given=true]{background:#f1e9d8;box-shadow:none;border-style:dashed}
.city-npc-dialog .city-npc-choice[data-given=true] .city-npc-choice-note{color:#377254}
.city-npc-choice-quest{display:flex;flex-direction:column;gap:1px;margin-top:4px;padding:7px 10px;border:1px solid #c9d8b8;border-radius:10px;background:#eef5e6;color:#2f5b3e}
.city-npc-choice-quest b{font-size:12.5px}.city-npc-choice-quest em{font-style:normal;color:#9a5a2c}
.city-npc-dialog .city-npc-next{margin-left:auto;border-color:var(--npc-gold);background:linear-gradient(#4b8559,#2f5b3e 55%,#264c33);color:#fff6df;box-shadow:0 3px 0 var(--npc-green-dark)}
.city-npc-emotion{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);padding:2px 10px;border:2px solid var(--npc-gold);border-radius:12px;background:#fffaf0;color:var(--npc-ink);font:800 12px/1.4 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;white-space:nowrap}
.city-npc-portrait img.city-npc-emotion-art{height:auto;max-height:100%;width:100%;max-width:100%}
/* Walk-up prompt. */
.city-npc-prompt{position:fixed;z-index:35;left:50%;bottom:130px;transform:translateX(-50%);max-width:calc(100vw - 32px);min-height:46px;padding:11px 22px;border:2px solid #d2a654;border-radius:24px;background:linear-gradient(#2f5b3e,#1f3d2a);box-shadow:inset 0 1px 0 #5e9068,0 3px 0 #10231699,0 6px 20px #052e284d;color:#fff6d5;font:800 13px 'Nunito Sans','Noto Sans Thai',Tahoma,sans-serif;cursor:pointer}
.city-npc-prompt[hidden]{display:none}.city-npc-prompt:disabled{opacity:.6}
/* Entrance. */
@keyframes city-npc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes city-npc-step{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.city-npc-dialog[open] .city-npc-panel{animation:city-npc-rise .24s ease-out both}
.city-npc-dialog[open] .city-npc-figure{animation:city-npc-step .3s ease-out both}
.city-npc-dialog[open] .city-npc-greeting{animation:city-npc-rise .32s .08s ease-out both}
@media(prefers-reduced-motion:reduce){.city-npc-dialog[open] .city-npc-panel,.city-npc-dialog[open] .city-npc-figure,.city-npc-dialog[open] .city-npc-greeting{animation:none}}
/* Phones: the resident stands above the panel's right corner. */
@media(max-width:600px){
 .city-npc-dialog[open]{grid-template-columns:minmax(0,1fr);padding-top:118px}
 .city-npc-figure{position:absolute;right:54px;top:0;width:120px;height:170px;margin:0}
 .city-npc-figure::before{width:130px;height:130px;bottom:24px}
 .city-npc-panel{max-height:calc(86dvh - 118px);padding:34px 16px 14px}
 .city-npc-header{left:14px;right:176px;top:-28px}
 .city-npc-heading{max-width:100%;padding:6px 16px 8px}.city-npc-heading h2{font-size:21px}
 .city-npc-dialog .city-npc-close{position:absolute;right:-174px;top:14px;width:40px;height:40px;font-size:22px}
 .city-npc-greeting{font-size:14px;padding:13px 14px 13px 36px}.city-npc-greeting::before{display:none}
 .city-npc-footer{flex-wrap:wrap}.city-npc-actions button{flex:1 1 150px;justify-content:center}.city-npc-dialog .city-npc-farewell{margin-left:0;flex:1 1 100%}
 .city-npc-prompt{bottom:126px;font-size:12px;padding:10px 17px;white-space:normal;line-height:1.5}
}
/* Short landscape screens: smaller resident, panel scrolls inside the viewport. */
@media(max-height:500px) and (min-width:601px){
 .city-npc-dialog[open]{grid-template-columns:170px minmax(0,1fr);width:min(760px,calc(100vw - 24px))}
 .city-npc-figure{height:calc(100dvh - 40px);max-height:300px;margin-right:-26px}
 .city-npc-figure::before{width:160px;height:160px;bottom:26px}
 .city-npc-panel{max-height:calc(100dvh - 58px);margin-top:34px;padding:30px 16px 12px 40px}
 .city-npc-heading h2{font-size:21px}.city-npc-greeting{font-size:13.5px;line-height:1.7;padding:11px 16px 11px 38px}.city-npc-footer{margin-top:10px}
 .city-npc-prompt{bottom:24px}
}