/* Loaded after legacy skins. Geometry lives in shared/village-layout.js. */
.game-shell .map-viewport #map.zone-village { width: 3000px; height: 2000px; }
#map.zone-village { isolation: isolate; background: #83a852 !important; }
.zone-village #villageScene { position: absolute; inset: 0; z-index: 0; }
.natural-terrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.terrain-paint { image-rendering: auto; }
#map:not(.zone-village) #villageScene, #map:not(.zone-village) #mapBuildings { display: none; }
.zone-village #mapBuildings, .zone-village #mapPlayers, .zone-village #mapNpcs,
.natural-building { display: contents; }
.natural-building img { position: absolute; max-width: none; object-fit: contain; pointer-events: none; image-rendering: auto; }
.natural-base { z-index: 10; }
.natural-label {
  position: absolute; translate: -50% 0; box-sizing: border-box;
  padding: 6px 17px 7px; border: 2px solid #53361f; border-radius: 4px 6px 5px 3px;
  color: #fff0be; background:
    repeating-linear-gradient(3deg, transparent 0 5px, #492c1818 6px, transparent 7px 11px),
    linear-gradient(#a5713e, #80532d 48%, #754725 52%, #8a5c32);
  box-shadow: inset 0 0 0 1px #d4a85c, inset 0 3px #f6d28c40, 1px 3px 0 #39291977;
  font: 700 12px/1.2 Georgia, serif; letter-spacing: .055em; text-shadow: 0 1px 1px #291b10;
  pointer-events: none; white-space: nowrap;
}
/* Two fixed iron straps visibly attach each board to the timber above it. */
.natural-sign::before, .natural-sign::after {
  content: ''; position: absolute; top: -12px; width: 4px; height: 16px;
  border: 1px solid #30352b; border-radius: 2px;
  background: linear-gradient(90deg, #7f8260, #43483a 55%, #2e3329);
  box-shadow: 1px 1px 1px #241c1855;
}
.natural-sign::before { left: 11px; }
.natural-sign::after { right: 11px; }

.zone-village .pawn {
  width: 46px; height: 60px; transform: translate(-50%, -100%);
  /* Depth must follow the displayed feet, not jump to the destination early. */
  transition: left .18s linear, top .18s linear, z-index .18s linear, transform .15s;
}
@media (prefers-reduced-motion: reduce) {
  .zone-village .pawn { transition: none; }
}
.zone-village .pawn:not(.self):hover, .zone-village .pawn:not(.self):focus-visible { transform: translate(-50%, -100%) scale(1.08); }
.zone-village .character-renderer { scale: .68; transform-origin: 50% 100%; }
.zone-village .npc { width: 46px; min-height: 60px; height: 60px; padding: 0; translate: -50% -100%; }
.zone-village .npc-role { display: none; }
.zone-village .npc > strong { position: absolute; top: -19px; font-size: 10px; white-space: nowrap; padding: 2px 4px; background: #405237dd; border-radius: 4px; }
.zone-village .npc-sprite { scale: .75; transform-origin: 50% 100%; position: absolute; bottom: 0; }
.zone-village .portal-hub { left: 100px; top: 1720px; z-index: 1900; translate: none; }
.zone-village .forest-exit { left: 2960px; top: 1720px; z-index: 1900; width: 70px; min-height: 70px; border-color: #b7c493; background: #53724c; box-shadow: none; animation: none; }
.zone-village .map-hint { left: 1450px; top: 1335px; z-index: 20; color: #697050; background: transparent; border: 0; font-size: 16px; letter-spacing: .12em; }
.zone-village .ambient-particles, .zone-village .zone-decor { display: none; }
.zone-village #destination { z-index: 30; }
.zone-village::before { display: none; }

/* Forest limits follow the full map, never the moving viewport. */
#forestBoundary { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.forest-boundary-art { display: block; width: 100%; height: 100%; }
.zone-village #forestBoundary { display: none; }
.zone-deep-forest .forest-boundary-art { filter: saturate(.94); }
.zone-forest .pawn.self, .zone-deep-forest .pawn.self { z-index: 9; }
.world-passage { z-index: 8; }

/* The frame and empty stone bowl stay fixed; only the energy rotates. */
#map .portal.root-portal {
  --portal-base: #8e5814; --portal-accent: #ffd858; --portal-light: #fff5bc;
  width: 260px; height: 260px; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  translate: -50% -90%; animation: none; overflow: visible;
}
#map .root-portal .root-portal-art { position: absolute; inset: 0; pointer-events: none; }
#map .root-portal-art img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
#map .root-portal .portal-vortex { position: absolute; left: 20%; top: 17%; width: 60%; height: 57%; overflow: hidden; border-radius: 50%; background: var(--portal-base); }
#map .root-portal .portal-vortex-spin { position: absolute; inset: -20%; background: conic-gradient(var(--portal-base),var(--portal-accent),var(--portal-base),var(--portal-light),var(--portal-base)); animation: root-vortex-spin 8s linear infinite; }
.portal-vortex-spin svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--portal-light); stroke-width: 2; opacity: .75; }
#map .root-portal > strong, #map .root-portal > .portal-status { position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: 235px; padding: 4px 7px; border-radius: 5px; background: #183125eb; color: #f5ecd1; text-shadow: none; }
#map .root-portal > strong { top: 96%; font-size: 12px; }
#map .root-portal > .portal-status { top: calc(96% + 25px); font-size: 10px; }
#map .root-portal[data-tone="off"] .portal-vortex { visibility: hidden; }
#map .root-portal:disabled { opacity: 1; cursor: not-allowed; }
#map .root-portal:focus-visible { outline: 2px solid #f3d694; outline-offset: 5px; }
#map.zone-village .portal-hub .root-portal { translate: -38% -90%; }
#map.zone-village .forest-exit.root-portal { translate: -85% -90%; }
#map .portal-choices { z-index: 10; left: 170px; top: -110px; width: 180px; }
@keyframes root-vortex-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #map .root-portal .portal-vortex-spin { animation: none; } }

/* Keep the village frame inside the world at the existing travel point. */
#map.zone-village .portal.root-portal { width: 220px; height: 220px; }

/* Compact character card: portrait, location, health, then experience. */
.player-hud { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; width: 340px; max-width: calc(100vw - 90px); padding: 12px; border: 1px solid #b6a16b; border-radius: 16px; background: linear-gradient(145deg, #243e32f5, #14281ff5); box-shadow: 0 5px 18px #10201666, inset 0 1px #f5e3ac22; }
.hud-portrait { position: relative; align-self: start; height: 90px; overflow: hidden; border: 1px solid #ac9764; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%, #789361, #293e30 75%); }
.hud-portrait .character-sprite { position: absolute; left: 50%; top: 0; margin-left: -34px; transform: scale(1.35); transform-origin: 50% 20%; }
.hud-portrait #level { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 0; background: #14281feb; color: #f4d48a; text-align: center; font: 700 10px/1.2 system-ui, sans-serif; }
.hud-details { min-width: 0; }
.player-hud #identity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff2d2; font: 700 16px/1.25 Georgia, serif; }
.player-hud .hud-location { margin: 3px 0 9px; color: #bacaaf; font: 11px/1.3 system-ui, sans-serif; }
.hud-meter-heading { display: flex; justify-content: space-between; gap: 6px; color: #e5eee0; font: 11px/1.3 system-ui, sans-serif; }
.hud-meter-heading small { font: inherit; }
.hud-health-track, .player-hud .progress-track { overflow: hidden; height: 7px; margin-top: 3px; border: 1px solid #8b9b6c66; border-radius: 8px; background: #0d1a15; box-shadow: inset 0 1px 3px #0005; }
.hud-health-track i { display: block; height: 100%; background: linear-gradient(90deg, #a53845, #f07877); transition: width .4s ease; }
.hud-health-track.is-low { border-color: #ffaba0; }
.hud-xp-heading { margin-top: 7px; color: #d9c796; }
.player-hud .progress-track { height: 5px; }
.player-hud .progress-track i { background: linear-gradient(90deg, #b08a41, #f1d384); }
@media (max-width: 560px) {
  .player-hud { left: 8px; top: 8px; width: 292px; max-width: calc(100vw - 80px); grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 9px; border-radius: 12px; }
  .hud-portrait { height: 77px; }
  .hud-portrait .character-sprite { transform: scale(1.05); }
  .hud-portrait #level { font-size: 9px; }
  .player-hud #identity { font-size: 14px; }
  .player-hud .hud-location { font-size: 10px; margin-bottom: 6px; }
  .hud-meter-heading { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hud-health-track i { transition: none; } }


/* Ripples drift slowly inside the river; bank and collision bounds stay fixed. */
.river-ripples { animation: river-ripples 8s ease-in-out infinite alternate; }
@keyframes river-ripples { to { transform: translateY(12px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .river-ripples { animation: none; } }