/* Artwork-first 2.5D village. Labels and polygons stay attached to the image. */
.village-hud.modern-hud-header { background: #fffaf0f5; border-bottom: 1px solid #d8cbb6; box-shadow: 0 2px 16px #283b3020; padding: 8px 20px; height: 64px; box-sizing: border-box; display: flex; align-items: center; }
.village-hud .hud-inner { max-width: none; width: 100%; }
.village25d-wrapper.modern-map-wrapper { min-height: 0; }
.village-hud .hud-logo-text { color: #263e35; text-shadow: none; font-size: 1.1rem; letter-spacing: -.3px; }
.village-hud .hud-logo-text > span > span { color: #94702e !important; }
.village-hud .hud-logo-subtitle, .village-hud .hud-user-rank, .village-hud #header-membership-badge,
.village-hud .hud-pill--streak, .village-hud .hud-quiet-action { display: none !important; }
.village-hud .hud-pill--elo { display: inline-flex !important; cursor: pointer; }
.village-hud .hud-pill--elo:hover { border-color: #a99967; background: #e8dfcc; }
.village-hud .hud-pill-tag { font-size: 0.72em; font-weight: 800; opacity: 0.8; margin-right: 2px; }
.village-hud .hud-brand-group { gap: 12px; }
.village-hud .hud-logo-img { height: 34px; filter: none; }
.village-hud .sidebar-toggle { display: flex; align-items: center; justify-content: center; background: #ede6d7; color: #355244; border: 1px solid #d7cbb8; border-radius: 12px; width: 40px; height: 40px; }
.village-hud .hud-pill { background: #f0eada; color: #3d4b3b; border: 1px solid #e0d3b8; box-shadow: none; }
.village-hud .hud-pill-val { color: #364d3d; text-shadow: none; }
.village-hud .hud-btn { background: #f0eada; color: #3d4b3b; border: 1px solid #e0d3b8; box-shadow: none; }
.village-hud .hud-user-name { color: #355244; text-shadow: none; }
.village-hud .hud-avatar-ring { background: #a99967; box-shadow: none; }
.village-hud .hud-avatar-inner { background: #f3ecd9; }
.village-hud .hud-mode-pill { color: #516750; }
.village-hud .hud-mode-switcher { background: #eee5d3; border-color: #d7cbb8; }
#village-map.village25d-active, #village-map.village25d-pending { position: relative; overflow: hidden; height: calc(100dvh - 64px); background: #c9dcd0; }
.village25d-active > .village-map-inner, .village25d-pending > .village-map-inner { display: none !important; }
.village25d-active > .activity-ticker, .village25d-pending > .activity-ticker { display: none; }
.village25d-active > .event-lb-desktop, .village25d-pending > .event-lb-desktop { position: absolute; top: 20px !important; right: 20px !important; width: 200px; }
.village25d-active .event-lb-card { background: #fffaf0f2; border: 1px solid #d7cbb8; box-shadow: 0 5px 18px #283b3026; border-radius: 14px; }
.village25d-active .event-lb-header { padding: 9px 12px; }
.village25d-active .event-lb-title, .village25d-active .event-lb-toggle { color: #355244; }
.village25d-active .event-lb-body { background: #253e36; border-radius: 0 0 13px 13px; }
#home-village25d { position: absolute; inset: 0; overflow: hidden; z-index: 5; background: #bfd6c9; color: #263e35; font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
#home-village25d[hidden] { display: none; }
.village25d-backdrop { position: absolute; inset: -40px; background: linear-gradient(#d1e8e01f,#183d3530), url('/img/map/village-riverside-beanstalk.webp') center / cover; filter: blur(24px); opacity: .65; pointer-events: none; }
.village25d-portrait .village25d-backdrop { display: none; }
.village25d-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.village25d-dragging .village25d-viewport { cursor: grabbing; }
.village25d-scene { position: absolute; left: 50%; top: 50%; margin-left: calc(var(--village25d-width, 0px) / -2); margin-top: calc(var(--village25d-height, 0px) / -2); transform-origin: center; will-change: transform; }
.village25d-art { display: block; width: 100%; height: 100%; max-width: none; user-select: none; pointer-events: none; }
.village25d-regions { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.village25d-regions polygon { fill: transparent; stroke: transparent; stroke-width: .15; pointer-events: all; cursor: pointer; transition: fill .16s, stroke .16s; }
.village25d-regions polygon.is-hover { fill: #fff3bd18; stroke: #fff4c3a6; }
.village25d-pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 12px 7px 8px; border: 1px solid #ddcfa9; border-radius: 14px; background: #fffbeeef; color: #354736; box-shadow: 0 4px 13px #153b3540, inset 0 1px 0 #fff; font: 700 12px 'Be Vietnam Pro', system-ui, sans-serif; white-space: nowrap; cursor: pointer; touch-action: none; }
.village25d-pin-dot { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #426b50; color: #fff9e8; font-size: 11px; flex-shrink: 0; }
.village25d-pin { transform-origin: 0 0; }
.village25d-pin-lock { font-size: 10px; }
.village25d-pin-lock[hidden] { display: none; }
.village25d-pin.is-hover, .village25d-pin.is-selected { background: #fff4cd; border-color: #ad8545; box-shadow: 0 0 0 2px #ffe8a780, 0 5px 18px #153b3540; z-index: 4; }
.village25d-pin.is-locked .village25d-pin-dot { background: #7d7053; }
.village25d-pin:focus-visible { outline: 3px solid #275ea5; outline-offset: 3px; }
.village25d-compact .village25d-pin { border-radius: 50%; width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; gap: 0; }
.village25d-compact .village25d-pin::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; }
.village25d-compact .village25d-pin-dot { width: 28px; height: 28px; }
.village25d-compact .village25d-pin-name { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); background: #fffbee; border: 1px solid #ddcfa9; border-radius: 9px; padding: 7px 10px; display: none; pointer-events: none; }
.village25d-compact .village25d-pin:is(.is-hover, .is-selected, :focus-visible) .village25d-pin-name { display: block; }
.village25d-compact .village25d-pin--right .village25d-pin-name { left: auto; right: 0; transform: none; }
.village25d-compact .village25d-pin--left .village25d-pin-name { left: 0; transform: none; }
.village25d-compact .village25d-pin-lock { position: absolute; right: -3px; top: -3px; background: #fff7dc; border-radius: 50%; padding: 2px; }
.village25d-hint { position: absolute; left: 50%; bottom: max(17px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 9px 15px; border-radius: 25px; background: #fffbeeeb; color: #49634b; box-shadow: 0 3px 16px #163e3525; font-size: 11px; white-space: nowrap; pointer-events: none; }
.village25d-status { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); background: #fff7d8; border-radius: 12px; padding: 10px 15px; font-size: 12px; text-align: center; box-shadow: 0 3px 16px #163e3525; pointer-events: none; }
.village25d-status:empty { display: none; }
.village25d-water { position: absolute; inset: 0; pointer-events: none; }
.village25d-water i { position: absolute; width: 2%; height: .25%; border-radius: 50%; background: #fffbe6; box-shadow: 0 0 5px #fffbe6; animation: village25d-shimmer 6s ease-in-out infinite; opacity: 0; }
.village25d-water i:nth-child(2) { animation-delay: -2s; }
.village25d-water i:nth-child(3) { animation-delay: -4s; }
.village25d-water i:nth-child(4) { animation-delay: -1s; }
@keyframes village25d-shimmer { 0%,100% { opacity: 0; transform: translateX(-8px); } 50% { opacity: .45; transform: translateX(8px); } }
.village25d-paused *, .village25d-paused *::before { animation-play-state: paused !important; }
.village25d-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; background: #e7eddf; color: #45624b; font: 600 15px system-ui; }
@media(max-width: 768px) {
    .village-hud.modern-hud-header { padding: 7px 10px; height: 54px; }
    .village-hud .hud-logo-img { height: 27px; }
    .village-hud .hud-logo-text { display: none; }
    .village-hud .hud-brand-group { gap: 7px; }
    .village-hud .sidebar-toggle { width: 36px; height: 36px; }
    .village-hud .hud-actions-group { gap: 5px; }
    .village-hud .hud-pill { padding: 5px 8px; gap: 4px; }
    .village-hud .hud-pill-val { font-size: .85rem; }
    #village-map.village25d-active, #village-map.village25d-pending { height: calc(100dvh - 54px); min-height: 400px; }
    .village25d-hint { font-size: 10px; max-width: calc(100% - 24px); }
    .village25d-hint span { display: none; }
    .village25d-active > .mobile-event-pill { position: absolute; top: 88px; left: 14px; bottom: auto; background: #fffbee; color: #49634b; border-color: #d7cbb8; }
    .village25d-pin { font-size: 11px; }
}
@media(max-width: 480px) {
    .village-hud.modern-hud-header { padding: 6px 8px; }
    .village-hud .hud-resources { gap: 4px; }
    .village-hud .hud-pill { padding: 4px 6px; gap: 3px; }
    .village-hud .hud-pill-val { font-size: .78rem; }
}
@media(max-width: 350px) {
    .village-hud .hud-logo { display: none; }
    .village-hud .hud-pill--coins { display: inline-flex !important; }
    .village-hud .hud-inner, .village-hud .hud-resources, .village-hud .hud-actions-group { gap: 3px; }
    .village-hud .hud-pill { padding: 4px 3px; }
}
@media(prefers-reduced-motion: reduce) { .village25d-water i { animation: none; } .village25d-regions polygon { transition: none; } }