.location_top_strip {
    text-align: center;
}

.location-top-admin-action {
    margin-top: 4px;
}

.location-top-admin-action .btn_small {
    display: inline-block;
}

.location-top-tech {
    margin-top: 3px;
}

.location-map-surface {
    width: 100%;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    background-color: #3b3a2e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#location-map-block.location-map-pending {
    opacity: 0;
}

/* Chat starts collapsed; JavaScript restores an explicit user choice. */
#location-chat-feed {
    display: none;
}

.location-map-cell {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.location-map-cell--building {
    z-index: 2;
}

.location-building-label {
    position: absolute;
    left: 50%;
    top: 1px;
    transform: translateX(-50%);
    box-sizing: border-box;
    min-width: 72px;
    max-width: 150px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    text-shadow: black 1px 1px 1px;
    white-space: nowrap;
    pointer-events: none;
}

.location-building-label--landmark {
    top: -18px;
}

.location-building-label--raised {
    top: calc(1px - 25%);
}

.location-building-label--landmark.location-building-label--raised {
    top: calc(-18px - 25%);
}

.location-birds-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

.location-bird-flight {
    position: absolute;
    width: calc(var(--map-cell-width) * .85);
    min-width: 24px;
    max-width: 48px;
    aspect-ratio: 2 / 3;
    transform: translate(-50%, -50%);
    will-change: left, top;
}

.location-bird-sprite {
    width: 100%;
    height: 100%;
    background: url('/images/locations/ambient/bird-flight.png') no-repeat 0 0;
    background-size: 400% 100%;
    animation: location-bird-flap 480ms steps(4, jump-none) infinite;
}

.location-bird-flight--left .location-bird-sprite {
    transform: scaleX(-1);
}

@keyframes location-bird-flap {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

.location-map-surface:empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, .2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, .2) 1px, transparent 1px);
    background-size: var(--map-cell-width) var(--map-cell-height);
    pointer-events: none;
}

.location-map-surface:empty::after {
    content: "Загрузка карты…";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 8px;
    background: rgba(0, 0, 0, .55);
    color: #e0e0e0;
    font-size: 11px;
    white-space: nowrap;
}

/* Lightweight ambient layer for world 1. Effects are positioned over existing
   cells and only instantiated for the current viewport. */
.location-ambient-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
    contain: layout paint;
}

.location-rabbits-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
    contain: layout paint;
}

.location-rabbit {
    position: absolute;
    width: calc(var(--map-cell-width) * .42);
    height: calc(var(--map-cell-height) * .54);
    min-width: 16px;
    min-height: 20px;
    max-width: 28px;
    max-height: 36px;
    opacity: 0;
    transform: translate(-50%, -55%) translate3d(var(--rabbit-x, 0px), var(--rabbit-y, 0px), 0);
    transform-origin: 50% 70%;
    transition: transform var(--rabbit-move-ms, 5200ms) cubic-bezier(.35, .05, .25, 1), opacity 1450ms ease;
    will-change: transform, opacity;
}

.location-rabbit.is-spawning {
    transition: transform var(--rabbit-move-ms, 5200ms) cubic-bezier(.35, .05, .25, 1), opacity var(--rabbit-move-ms, 5200ms) ease-in-out;
}

.location-rabbit.is-visible {
    opacity: 1;
}

.location-rabbit.is-returning {
    opacity: 0;
    transition: transform var(--rabbit-move-ms, 5200ms) cubic-bezier(.35, .05, .25, 1), opacity var(--rabbit-move-ms, 5200ms) ease-in-out;
}

.location-rabbit-sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: url('/images/locations/ambient/rabbit-hop.png') no-repeat 0 0;
    background-size: 400% 100%;
    transform-origin: 50% 70%;
}

.location-rabbit.is-facing-left .location-rabbit-sprite {
    transform: scaleX(-1);
}

.location-rabbit.is-moving .location-rabbit-sprite {
    animation: location-rabbit-hop 760ms step-end infinite;
    will-change: background-position;
}

@keyframes location-rabbit-hop {
    0% { background-position: 0 0; }
    25% { background-position: 33.333333% 0; }
    50% { background-position: 66.666667% 0; }
    75% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.location-ambient-effect {
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--ambient-rotation, 0deg)) scale(var(--ambient-scale, 1));
    transform-origin: 50% 50%;
    pointer-events: none;
}

.location-ambient-core {
    position: absolute;
    inset: 0;
    display: block;
}

.location-ambient--pond-glint,
.location-ambient--fountain-glint {
    width: calc(var(--map-cell-width) * .72);
    height: calc(var(--map-cell-height) * .24);
}

.location-ambient--pond-glint .location-ambient-core,
.location-ambient--fountain-glint .location-ambient-core {
    overflow: hidden;
    border-radius: 50%;
}

.location-ambient--pond-glint .location-ambient-core::before,
.location-ambient--fountain-glint .location-ambient-core::before {
    content: "";
    position: absolute;
    left: -55%;
    top: 12%;
    width: 48%;
    height: 76%;
    border-radius: 50%;
    background: linear-gradient(105deg, transparent 0%, rgba(235, 251, 255, .05) 22%, rgba(246, 255, 255, .72) 52%, rgba(207, 245, 255, .08) 76%, transparent 100%);
    opacity: 0;
    transform: skewX(-18deg);
    animation: location-ambient-water-glint 6.4s ease-in-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--pond-ripple,
.location-ambient--fountain-ripple {
    width: calc(var(--map-cell-width) * .46);
    height: calc(var(--map-cell-height) * .18);
}

.location-ambient--pond-ripple .location-ambient-core,
.location-ambient--fountain-ripple .location-ambient-core {
    border: 1px solid rgba(229, 250, 255, .58);
    border-radius: 50%;
    opacity: 0;
    animation: location-ambient-water-ripple 7.2s ease-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--fountain-splash {
    width: calc(var(--map-cell-width) * .34);
    height: calc(var(--map-cell-height) * .48);
}

.location-ambient--fountain-splash .location-ambient-core::before,
.location-ambient--fountain-splash .location-ambient-core::after {
    content: "";
    position: absolute;
    left: 45%;
    bottom: 5%;
    width: 22%;
    height: 30%;
    border-radius: 50%;
    background: rgba(236, 253, 255, .95);
    box-shadow: 0 1px 2px rgba(25, 92, 133, .55);
    opacity: 0;
    animation: location-ambient-fountain-splash 4.8s ease-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--fountain-splash .location-ambient-core::after {
    left: 64%;
    width: 17%;
    height: 24%;
    animation-delay: calc(var(--ambient-delay, 0s) - .18s);
}

.location-ambient--lamp-glow {
    width: calc(var(--map-cell-width) * .78);
    height: calc(var(--map-cell-height) * .66);
}

.location-ambient--lamp-glow .location-ambient-core {
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 247, 196, .95) 0%, rgba(255, 222, 128, .52) 30%, rgba(255, 208, 110, 0) 72%);
    opacity: .52;
    animation: location-ambient-lamp-breathe 5.6s ease-in-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--shore-wave {
    width: calc(var(--map-cell-width) * .90);
    height: calc(var(--map-cell-height) * .17);
}

.location-ambient--shore-wave .location-ambient-core {
    border-top: 2px solid rgba(235, 252, 255, .90);
    background: linear-gradient(rgba(219, 249, 255, .28), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: location-ambient-shore-wave 6.8s ease-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--butterfly {
    width: 18px;
    height: 18px;
}

.location-ambient--butterfly .location-ambient-core {
    animation: location-ambient-butterfly-float 7.4s ease-in-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient--butterfly .location-ambient-sprite {
    position: absolute;
    inset: 0;
    display: block;
    background-image: url('/images/locations/ambient/butterfly-fly.png');
    background-repeat: no-repeat;
    background-size: 400% 100%;
    background-position: 0 0;
    transform-origin: 50% 50%;
    animation:
        location-ambient-butterfly-sprite 640ms step-end infinite,
        location-ambient-butterfly-facing 7.4s step-end infinite;
    animation-delay: var(--ambient-delay, 0s), var(--ambient-delay, 0s);
}

.location-ambient--foliage-breeze {
    width: calc(var(--map-cell-width) * .82);
    height: calc(var(--map-cell-height) * .68);
}

.location-ambient--foliage-breeze .location-ambient-core {
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 40%, rgba(231, 250, 179, .38), transparent 70%), radial-gradient(ellipse at 70% 60%, rgba(24, 65, 23, .20), transparent 70%);
    opacity: .25;
    animation: location-ambient-foliage-breeze 6.2s ease-in-out infinite;
    animation-delay: var(--ambient-delay, 0s);
}

.location-ambient-layer.is-paused .location-ambient-core,
.location-ambient-layer.is-paused .location-ambient-core::before,
.location-ambient-layer.is-paused .location-ambient-core::after,
.location-ambient-layer.is-paused .location-ambient-sprite {
    animation-play-state: paused !important;
}

@keyframes location-ambient-water-glint {
    0%, 54%, 100% { left: -55%; opacity: 0; }
    60% { opacity: .20; }
    72% { opacity: .78; }
    88% { left: 112%; opacity: 0; }
}

@keyframes location-ambient-water-ripple {
    0%, 50%, 100% { transform: scale(.36); opacity: 0; }
    57% { opacity: .48; }
    84% { transform: scale(1.36); opacity: 0; }
}

@keyframes location-ambient-fountain-splash {
    0%, 35%, 100% { transform: translateY(0) scale(.75); opacity: 0; }
    46% { opacity: .90; }
    76% { transform: translateY(-58%) scale(1); opacity: .35; }
    90% { transform: translateY(-72%) scale(.82); opacity: 0; }
}

@keyframes location-ambient-lamp-breathe {
    0%, 100% { opacity: .42; transform: scale(.92); }
    48% { opacity: .82; transform: scale(1.08); }
    63% { opacity: .64; transform: scale(1); }
}

@keyframes location-ambient-shore-wave {
    0%, 30%, 100% { transform: translateY(24%) scaleX(.45); opacity: 0; }
    44% { opacity: .70; }
    78% { transform: translateY(-12%) scaleX(1.06); opacity: .25; }
    91% { opacity: 0; }
}

@keyframes location-ambient-butterfly-float {
    0%, 100% { transform: translate(-35%, 15%) rotate(-8deg); }
    25% { transform: translate(85%, -50%) rotate(12deg); }
    52% { transform: translate(25%, -110%) rotate(-6deg); }
    76% { transform: translate(-80%, -35%) rotate(9deg); }
}

@keyframes location-ambient-butterfly-sprite {
    0%, 24.99% { background-position: 0 0; }
    25%, 49.99% { background-position: 33.333333% 0; }
    50%, 74.99% { background-position: 66.666667% 0; }
    75%, 100% { background-position: 100% 0; }
}

@keyframes location-ambient-butterfly-facing {
    0%, 24.99% { transform: scaleX(1); }
    25%, 75.99% { transform: scaleX(-1); }
    76%, 100% { transform: scaleX(1); }
}

@keyframes location-ambient-foliage-breeze {
    0%, 100% { transform: translateX(-7%) scale(.96); opacity: .28; }
    48% { transform: translateX(8%) scale(1.03); opacity: .55; }
    67% { transform: translateX(2%) scale(.99); opacity: .38; }
}

.location-map-cell.location-route-target::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid #f5dc74;
    border-radius: 4px;
    box-shadow: 0 0 8px #201700;
    pointer-events: none;
    z-index: 3;
}