/* One RGBA source, eight feet-aligned pairs. No sprite DOM replacement on ticks. */
.npc-character { --npc-row: 0; --npc-delay: 0s; --npc-cycle: 7s; }
.npc-art-selene { --npc-row: 0; --npc-delay: -1s; --npc-cycle: 8.7s; }
.npc-art-borin { --npc-row: 1; --npc-delay: -2.4s; --npc-cycle: 5.9s; }
.npc-art-mina { --npc-row: 2; --npc-delay: -4s; --npc-cycle: 7.7s; }
.npc-art-nelis { --npc-row: 3; --npc-delay: -1.8s; --npc-cycle: 8.1s; }
.npc-art-gaspard { --npc-row: 4; --npc-delay: -5.2s; --npc-cycle: 9.3s; }
.npc-art-gribsin { --npc-row: 5; --npc-delay: -3s; --npc-cycle: 6.7s; }
.npc-art-maera { --npc-row: 6; --npc-delay: -6s; --npc-cycle: 10.1s; }
.npc-art-alya { --npc-row: 7; --npc-delay: -4.6s; --npc-cycle: 8.9s; }
.zone-village .npc.npc-character, .npc.npc-character { width: 64px; height: 72px; min-height: 72px; padding: 0; display: block; translate: -50% -100%; overflow: visible; filter: none; }
.npc.npc-character::before { content: ''; position: absolute; width: 30px; height: 7px; border-radius: 50%; background: #152b3559; bottom: -3px; left: 17px; pointer-events: none; }
.zone-village .npc-character .npc-sprite, .npc-character .npc-sprite, .npc-portrait .npc-sprite { display: block; position: absolute; bottom: -2px; left: 0; width: 64px; height: 72px; scale: 1; border: 0; border-radius: 0; box-shadow: none; margin: 0; background: url('/assets/npcs/cast-v1.svg') no-repeat 0 calc(var(--npc-row) * -72px) / 128px 576px; transform-origin: 50% 70px; image-rendering: pixelated; animation: npc-gesture var(--npc-cycle, 8s) steps(1, end) var(--npc-delay, 0s) infinite, npc-breathe 3.8s ease-in-out var(--npc-delay, 0s) infinite; }
.zone-village .npc-character > strong, .npc-character > strong { position: absolute; top: -17px; left: 50%; translate: -50% 0; padding: 3px 6px; border: 1px solid #d8be77; border-radius: 5px; background: #182b26ed; color: #fff6d8; font: 700 11px/1.1 system-ui, sans-serif; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; }
.zone-village .npc-character .npc-role, .npc-character .npc-role { display: none; position: absolute; top: 75px; left: 50%; translate: -50% 0; width: max-content; max-width: 120px; padding: 3px 5px; font: 700 10px/1.2 system-ui, sans-serif; background: #f5e2b8; color: #253a2e; pointer-events: none; }
.npc-character:hover .npc-role, .npc-character:focus-visible .npc-role { display: block; }
.npc.npc-character:hover { scale: 1; }
.npc.npc-character:focus-visible { scale: 1; outline: 2px solid #ffe49b; outline-offset: 3px; border-radius: 8px; }
.npc-portrait { display: block; position: relative; width: 64px; height: 72px; margin: 0 auto 12px; }
.npc-portrait .npc-sprite { animation: none; }
@keyframes npc-gesture { 0%, 72%, 100% { background-position-x: 0; } 76%, 90% { background-position-x: -64px; } }
@keyframes npc-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.008); } }
@media (prefers-reduced-motion: reduce) { .zone-village .npc-character .npc-sprite, .npc-character .npc-sprite, .npc-portrait .npc-sprite { animation: none; transform: none; background-position-x: 0; } }
.npc-workshop { max-width: min(560px, 94vw); }
.npc-workshop article { display: grid; gap: 9px; padding: 14px 0; border-bottom: 1px solid #baa16a55; }
.npc-workshop article small, #npcServiceStatus, #guildNotice { color: #c1cbb7; line-height: 1.6; }
.npc-workshop button { min-height: 40px; }
#bankTransfer { grid-template-columns: 1fr 1fr; }
#bankTransfer label, #bankTransfer input { grid-column: 1 / -1; }
.selene-guide { padding: 12px 14px; border: 1px solid #d8be7766; border-radius: 10px; background: #13261f; }
.selene-guide ol { margin: 8px 0 0; padding-left: 1.35rem; color: #d8dfd2; line-height: 1.55; }
#shadowProposalForm { display: grid; gap: 12px; margin: 14px 0 20px; }
#shadowProposalForm label, #shadowProposalForm fieldset { display: grid; gap: 6px; }
#shadowProposalForm fieldset { margin: 0; padding: 12px; border: 1px solid #baa16a55; border-radius: 9px; }
#shadowProposalForm input:not([type="checkbox"]), #shadowProposalForm textarea { width: 100%; box-sizing: border-box; }
#shadowProposalForm textarea { min-height: 72px; resize: vertical; }
#shadowProposalForm .check-line { grid-template-columns: auto 1fr; align-items: start; }
#shadowProposals ol { margin: 6px 0; padding-left: 1.35rem; color: #c1cbb7; }
#premiumCatalog, #premiumPackages { display: grid; gap: 8px; }
@media (max-width: 620px) { .npc-workshop { inset: 8px; max-width: none; max-height: calc(100dvh - 16px); overflow-y: auto; } }