/* Epoch Of Rifts — world map V4
   A self-contained My Lands-inspired world view. */

#worldModal.world-modal {
    background: #0b100d !important;
    overflow: hidden !important;
}

.world-screen-v4 {
    --world-region-size: 94px;
    --world-region-height: 74px;
    --world-bronze: #b78a45;
    --world-parchment: #d7be86;
    --world-panel: #241a15;
    --world-panel-light: #3b291c;
    --world-own: #55b7e8;
    --world-foreign: #d85a50;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden !important;
    color: #f5e8bd;
    font-family: Georgia, "Times New Roman", serif;
    background:
        radial-gradient(circle at 18% 12%, rgba(71, 104, 56, .35), transparent 32%),
        radial-gradient(circle at 82% 76%, rgba(96, 58, 34, .34), transparent 34%),
        linear-gradient(145deg, #162019, #0d120f 62%, #17110d) !important;
}

.world-topbar-v4 {
    height: 70px !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: minmax(290px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(183, 138, 69, .7) !important;
    box-sizing: border-box !important;
    background:
        linear-gradient(90deg, rgba(27, 19, 14, .98), rgba(49, 33, 21, .96) 50%, rgba(24, 17, 13, .98)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .65), inset 0 -1px rgba(255, 224, 157, .08) !important;
    z-index: 20;
}

.world-heading-v4 {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.world-heading-emblem {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid #bd9552;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #67502e, #24170e 72%);
    box-shadow: inset 0 0 0 3px rgba(13, 8, 4, .65), 0 2px 9px #000;
}

.world-heading-emblem img {
    width: 27px;
    height: 27px;
    filter: sepia(.2) saturate(.8) brightness(1.45) drop-shadow(0 1px 2px #000);
}

.world-screen-v4 .world-title {
    color: #ffe3a0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
    text-shadow: 0 2px 3px #000;
}

.world-screen-v4 .world-subtitle {
    margin-top: 6px !important;
    color: #bda778 !important;
    font: 12px/1.2 Arial, sans-serif !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.world-screen-v4 .world-search-panel {
    height: 42px;
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    padding: 4px !important;
    border: 1px solid rgba(183, 138, 69, .55) !important;
    border-radius: 9px !important;
    background: rgba(8, 8, 6, .5) !important;
    box-shadow: inset 0 1px 7px rgba(0, 0, 0, .55);
    box-sizing: border-box;
}

.world-screen-v4 .world-search-panel input {
    width: 224px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #f6e7bc !important;
    background: rgba(25, 20, 15, .92) !important;
    font: 600 12px Arial, sans-serif !important;
    outline: none;
}

.world-screen-v4 .world-search-panel input:focus {
    box-shadow: 0 0 0 1px #d0a75d, 0 0 10px rgba(183, 138, 69, .32) !important;
}

.world-screen-v4 .world-search-panel button,
.world-screen-v4 .world-top-actions button,
.world-screen-v4 .world-zoom-controls button,
.world-screen-v4 .world-minimap-header button {
    border: 1px solid #8f6d39 !important;
    color: #f7e7b9 !important;
    background: linear-gradient(#5c4228, #2a1c12) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.35) !important;
    cursor: pointer;
}

.world-screen-v4 .world-search-panel button {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font: 700 12px Arial, sans-serif !important;
}

.world-screen-v4 .world-top-actions {
    display: flex !important;
    align-items: center;
    gap: 7px !important;
}

.world-screen-v4 .world-top-actions button {
    width: 54px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px !important;
    border-radius: 8px !important;
}

.world-screen-v4 .world-top-actions button > span {
    font: 24px/20px Arial, sans-serif;
}

.world-screen-v4 .world-top-actions button > small {
    font: 9px/1 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.world-screen-v4 .world-top-actions button.active {
    border-color: #d8b263 !important;
    background: linear-gradient(#765936, #3d2918) !important;
    box-shadow: inset 0 0 12px rgba(255, 213, 126, .12), 0 0 8px rgba(213, 170, 89, .28) !important;
}

.world-screen-v4 .world-close-action > span {
    color: #ffcfaa;
}

.world-screen-v4 button:hover {
    filter: brightness(1.12);
}

.world-screen-v4 button:focus-visible {
    outline: 2px solid #ffe3a0 !important;
    outline-offset: 2px;
}

.world-screen-v4 .world-filter-panel {
    min-height: 44px;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 5px 14px !important;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid rgba(126, 91, 48, .55) !important;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(33, 24, 17, .96), rgba(19, 18, 13, .94)) !important;
}

.world-filter-caption {
    flex: 0 0 auto;
    margin-right: 4px;
    color: #aa956c;
    font: 11px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.world-screen-v4 .world-filter-button {
    min-width: 0 !important;
    height: 32px !important;
    flex: 0 0 auto;
    padding: 0 11px !important;
    border: 1px solid #665037 !important;
    border-radius: 16px !important;
    opacity: .5 !important;
    color: #c8b88e !important;
    background: rgba(21, 18, 14, .8) !important;
    font: 700 11px Arial, sans-serif !important;
    white-space: nowrap;
}

.world-screen-v4 .world-filter-button span {
    margin-right: 3px;
    font-size: 13px;
}

.world-screen-v4 .world-filter-button.active {
    opacity: 1 !important;
    color: #ffe9b5 !important;
    border-color: #a47e42 !important;
    background: linear-gradient(#60472b, #302116) !important;
}

.world-main-v4 {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 74px minmax(570px, 1fr) 350px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    overflow: hidden;
    box-sizing: border-box !important;
}

.world-screen-v4 .world-nav-panel {
    position: relative;
    align-self: center !important;
    justify-self: stretch !important;
    width: auto !important;
    min-height: 232px !important;
    margin: 0 !important;
    padding: 12px 6px 9px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(183, 138, 69, .52) !important;
    border-radius: 37px 37px 15px 15px !important;
    background: linear-gradient(180deg, rgba(55, 39, 25, .94), rgba(24, 18, 13, .94)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 6px 16px rgba(0,0,0,.45);
    z-index: 8;
}

.world-compass-north {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin-bottom: 1px;
    border: 1px solid #9f773d;
    border-radius: 50%;
    color: #ffd898;
    background: #20150f;
    font: 700 11px Arial, sans-serif;
}

.world-screen-v4 .world-nav-panel button {
    min-width: 42px !important;
    width: 42px !important;
    height: 37px !important;
    padding: 0 !important;
    border: 1px solid #7c5b33 !important;
    border-radius: 9px !important;
    color: #f0d6a0 !important;
    background: linear-gradient(#4d3825, #241810) !important;
    font: 17px Arial, sans-serif !important;
}

.world-screen-v4 .world-nav-panel > div {
    display: flex !important;
    gap: 4px !important;
    transform: none !important;
}

.world-screen-v4 .world-nav-panel > div button {
    width: 30px !important;
    min-width: 30px !important;
}

.world-screen-v4 .world-nav-panel .world-nav-home {
    color: #ffe6a6 !important;
    border-color: #b58946 !important;
    background: linear-gradient(#705231, #382317) !important;
}

.world-viewport-v4 {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden !important;
    border: 1px solid #8c693c !important;
    border-radius: 10px !important;
    background: #1c2a1b !important;
    box-shadow: inset 0 0 28px rgba(0,0,0,.55), 0 7px 18px rgba(0,0,0,.42) !important;
}

.world-viewport-v4::before {
    display: none !important;
}

.world-region-bar {
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(203, 166, 93, .4);
    box-sizing: border-box;
    background:
        linear-gradient(90deg, rgba(23, 20, 15, .95), rgba(47, 35, 23, .9)),
        repeating-linear-gradient(90deg, transparent 0 20px, rgba(255,255,255,.02) 20px 21px);
    z-index: 5;
}

.world-region-bar h2 {
    display: inline-block;
    margin: 0 0 0 8px !important;
    color: #f4dda4 !important;
    font-size: 19px !important;
    line-height: 1.1;
    text-shadow: 0 2px 3px #000;
}

.world-region-bar p {
    margin: 5px 0 0 0;
    color: #ab9b79;
    font: 11px Arial, sans-serif;
}

.world-status-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #a78a50;
    border-radius: 11px;
    color: #e7d4a3;
    background: rgba(73, 57, 32, .8);
    font: 700 9px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.world-status-chip.is-mine {
    border-color: #66c6ee;
    color: #d9f4ff;
    background: rgba(31, 92, 121, .66);
}

.world-status-chip.is-foreign {
    border-color: #e47668;
    color: #ffe0dc;
    background: rgba(112, 40, 35, .68);
}

.world-status-chip.is-free {
    border-color: #bfa35f;
}

/* Чёткие границы территорий и собственный цвет каждого правителя. */
.world-region-tile.world-region-owned,
.world-region-tile.world-region-foreign {
    border-width: 3px !important;
}

.world-region-tile.world-region-owned {
    border-color: #63cfff !important;
    box-shadow: inset 0 0 0 2px rgba(111, 215, 255, .2), 0 0 10px rgba(71, 179, 226, .5) !important;
}

.world-region-tile.world-region-foreign {
    border-color: hsl(var(--region-owner-hue), 68%, 58%) !important;
    box-shadow: inset 0 0 0 2px hsla(var(--region-owner-hue), 75%, 60%, .22), 0 0 9px hsla(var(--region-owner-hue), 75%, 50%, .42) !important;
}

.world-mini-cell.world-mini-foreign {
    background: hsl(var(--region-owner-hue), 62%, 46%) !important;
}

.world-zoom-controls {
    height: 32px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(159, 119, 61, .7);
    border-radius: 7px;
    background: rgba(10, 9, 7, .72);
}

.world-screen-v4 .world-zoom-controls button {
    width: 31px;
    height: 31px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font: 21px Arial, sans-serif;
}

.world-zoom-controls span {
    width: 46px;
    color: #d8c394;
    text-align: center;
    font: 10px Arial, sans-serif;
}

.world-region-canvas {
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    scrollbar-color: #725632 #182019;
    scrollbar-width: thin;
    background:
        radial-gradient(ellipse at 17% 30%, rgba(58, 116, 58, .75), transparent 24%),
        radial-gradient(ellipse at 73% 20%, rgba(42, 91, 48, .62), transparent 27%),
        radial-gradient(ellipse at 82% 86%, rgba(131, 105, 60, .36), transparent 28%),
        radial-gradient(ellipse at 41% 75%, rgba(46, 100, 104, .24), transparent 22%),
        linear-gradient(145deg, #416e3f, #3f6338 48%, #52663a);
}

.world-region-canvas::before,
.world-region-canvas::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.world-region-canvas::before {
    inset: 0;
    background:
        repeating-linear-gradient(118deg, transparent 0 52px, rgba(246, 222, 155, .025) 53px 54px),
        repeating-linear-gradient(28deg, transparent 0 61px, rgba(0,0,0,.035) 62px 64px);
    mix-blend-mode: soft-light;
}

.world-region-canvas::after {
    left: 12%;
    top: -12%;
    width: 19%;
    height: 125%;
    border-radius: 45%;
    opacity: .42;
    background: linear-gradient(92deg, transparent, rgba(56, 139, 157, .7) 35%, rgba(30, 99, 120, .72) 58%, transparent);
    transform: rotate(13deg);
    filter: blur(1px);
}

.world-region-grid {
    position: relative;
    z-index: 1;
    width: max-content;
    min-width: calc(9 * var(--world-region-size) + 32px);
    min-height: calc(7 * var(--world-region-height) + 32px);
    display: grid;
    grid-template-columns: repeat(9, var(--world-region-size));
    grid-template-rows: repeat(7, var(--world-region-height));
    gap: 3px;
    padding: 16px;
    margin: auto;
    box-sizing: border-box;
}

.world-region-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(34, 47, 27, .62);
    border-radius: 3px;
    color: #fff0bf;
    cursor: pointer;
    isolation: isolate;
    box-shadow: inset 0 0 16px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.35);
    transition: filter .13s ease, transform .13s ease, box-shadow .13s ease;
}

.world-region-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 1px, transparent 2px),
        radial-gradient(circle at 75% 68%, rgba(0,0,0,.32) 0 1px, transparent 2px);
    background-size: 19px 17px, 23px 21px;
}

.world-region-tile:hover {
    z-index: 6;
    filter: brightness(1.13) saturate(1.08);
    transform: translateY(-2px) scale(1.018);
    box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 14px rgba(255,255,255,.08);
}

.world-region-biome-plains {
    background: linear-gradient(145deg, #6d9c4f, #4f833f 56%, #698b45);
}

.world-region-biome-forest {
    background: linear-gradient(145deg, #386d3a, #245a34 58%, #3d7339);
}

.world-region-biome-mountains {
    background: linear-gradient(145deg, #837b6c, #66645c 58%, #8a806b);
}

.world-region-biome-swamp {
    background: linear-gradient(145deg, #54715d, #385b51 58%, #65735a);
}

.world-region-biome-desert {
    background: linear-gradient(145deg, #bea06a, #9f7e50 58%, #c0a36c);
}

.world-region-variant-1 { filter: hue-rotate(-3deg) brightness(.98); }
.world-region-variant-2 { filter: hue-rotate(4deg) brightness(1.02); }
.world-region-variant-3 { filter: saturate(.94); }
.world-region-variant-4 { filter: brightness(.95) saturate(1.05); }

.world-region-void {
    border-style: dashed;
    border-color: rgba(130, 109, 71, .12);
    background: rgba(12, 15, 12, .2);
    cursor: default;
    box-shadow: none;
}

.world-region-void:hover {
    filter: none;
    transform: none;
    box-shadow: none;
}

.world-region-coordinate {
    position: absolute;
    top: 4px;
    left: 5px;
    z-index: 6;
    padding: 2px 5px;
    border: 1px solid rgba(255, 229, 166, .25);
    border-radius: 8px;
    color: #fff0c0;
    background: rgba(17, 18, 12, .58);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    font: 700 9px Arial, sans-serif;
}

.world-region-biome-label {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 5;
    color: rgba(255, 245, 210, .82);
    font: 8px Arial, sans-serif;
    text-shadow: 0 1px 2px #000;
    opacity: .76;
}

.world-region-owned {
    border-color: #69c8ed;
    box-shadow: inset 0 0 0 2px rgba(85, 183, 232, .45), 0 0 10px rgba(68, 165, 210, .45);
}

.world-region-foreign {
    border-color: #d86a5f;
    box-shadow: inset 0 0 0 2px rgba(216, 90, 80, .38), 0 0 9px rgba(169, 48, 40, .38);
}

.world-region-selected {
    z-index: 7;
    border-color: #fff5d0 !important;
    box-shadow: inset 0 0 0 3px rgba(255, 244, 206, .82), 0 0 17px rgba(255, 229, 151, .88) !important;
    animation: world-selected-pulse 2.4s ease-in-out infinite;
}

.world-region-tile.world-region-selected {
    border-color: #fff5d0 !important;
    box-shadow: inset 0 0 0 3px rgba(255, 244, 206, .82), 0 0 17px rgba(255, 229, 151, .88) !important;
}

@keyframes world-selected-pulse {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,244,206,.75), 0 0 11px rgba(255,224,136,.55); }
    50% { box-shadow: inset 0 0 0 3px rgba(255,250,224,.96), 0 0 21px rgba(255,226,132,.92); }
}

.world-region-castle {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 49%;
    width: 82%;
    height: 88%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.world-region-castle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.62));
}

.world-region-castle.is-foreign img {
    filter: sepia(.18) hue-rotate(318deg) saturate(1.2) drop-shadow(0 6px 5px rgba(0,0,0,.65));
}

.world-region-castle > span {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: #bdeaff;
    background: rgba(19, 59, 80, .84);
    font: 700 7px Arial, sans-serif;
    letter-spacing: .08em;
    box-shadow: 0 1px 4px #000;
}

.world-region-castle.is-foreign > span {
    color: #ffd2cc;
    background: rgba(99, 34, 31, .86);
}

.world-natural-scene {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.world-natural-scene i {
    position: absolute;
    display: block;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.32));
}

.world-natural-scene i:nth-child(1) { left: 18%; top: 34%; }
.world-natural-scene i:nth-child(2) { left: 39%; top: 22%; transform: scale(.8); }
.world-natural-scene i:nth-child(3) { left: 58%; top: 38%; transform: scale(1.12); }
.world-natural-scene i:nth-child(4) { left: 73%; top: 18%; transform: scale(.66); }
.world-natural-scene i:nth-child(5) { left: 45%; top: 55%; transform: scale(.55); }

.world-natural-forest i {
    width: 19px;
    height: 30px;
    background: linear-gradient(90deg, #1c4d2c, #4f8338 58%, #21492b);
    clip-path: polygon(50% 0, 84% 34%, 69% 34%, 100% 68%, 68% 68%, 78% 100%, 22% 100%, 32% 68%, 0 68%, 31% 34%, 16% 34%);
}

.world-natural-mountains i,
.world-natural-mountain i {
    width: 30px;
    height: 27px;
    background: linear-gradient(132deg, #d1c5ac 0 18%, #80796c 19% 54%, #575850 55%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.world-natural-desert i {
    width: 28px;
    height: 12px;
    border-radius: 50% 50% 35% 35%;
    border-top: 3px solid rgba(236, 205, 139, .65);
    transform: rotate(-8deg);
}

.world-natural-swamp i {
    width: 24px;
    height: 9px;
    border: 2px solid rgba(85, 157, 158, .65);
    border-radius: 50%;
    background: rgba(40, 105, 111, .44);
}

.world-natural-field i {
    width: 3px;
    height: 26px;
    border-radius: 2px;
    background: #d8b85e;
    box-shadow: -4px 5px #bf9946, 4px 8px #e2c874;
    transform: rotate(-7deg);
}

.world-natural-plains i,
.world-natural-empty i {
    width: 3px;
    height: 13px;
    border-radius: 50% 50% 0 0;
    background: #315f34;
    box-shadow: -4px 5px #5d8d45, 4px 4px #47763b;
    transform: rotate(12deg);
    opacity: .65;
}

.world-natural-wasteland i,
.world-natural-ruins i,
.world-natural-bandit_camp i {
    width: 18px;
    height: 12px;
    border: 2px solid rgba(94, 67, 49, .7);
    border-width: 2px 0 0 2px;
    transform: rotate(18deg);
}

.world-kingdom-panel-v4 {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #82623a;
    border-radius: 10px;
    background:
        linear-gradient(rgba(39, 29, 20, .96), rgba(22, 18, 14, .97)),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.02) 8px 9px);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 7px 18px rgba(0,0,0,.42);
}

.world-kingdom-panel-header {
    min-height: 67px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(183, 138, 69, .42);
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(75, 52, 31, .6), transparent);
}

.world-kingdom-panel-header > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.world-kingdom-panel-header span {
    color: #c4ac79;
    font: 10px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.world-kingdom-panel-header b {
    color: #ffe2a0;
    font-size: 19px;
}

.world-kingdom-panel-header small {
    display: block;
    margin-top: 5px;
    color: #9f8e6b;
    font: 10px Arial, sans-serif;
}

.world-sites-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(52px, 1fr));
    grid-auto-rows: minmax(62px, 1fr);
    gap: 4px;
    padding: 7px;
    overflow: auto;
    scrollbar-color: #725632 #18130f;
    scrollbar-width: thin;
}

.world-site-tile {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(138, 114, 70, .48);
    border-radius: 5px;
    color: #f7e8b7;
    cursor: pointer;
    isolation: isolate;
    box-shadow: inset 0 0 10px rgba(0,0,0,.24);
}

.world-site-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .25;
    background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,.4) 0 1px, transparent 1.5px);
    background-size: 15px 13px;
}

.world-site-terrain-plains { background: linear-gradient(145deg, #5f8d46, #3f713a); }
.world-site-terrain-forest { background: linear-gradient(145deg, #326b38, #214f31); }
.world-site-terrain-mountains { background: linear-gradient(145deg, #7b766b, #555850); }
.world-site-terrain-field { background: linear-gradient(145deg, #a78c4d, #718244); }
.world-site-terrain-swamp { background: linear-gradient(145deg, #48685a, #345249); }
.world-site-terrain-wasteland { background: linear-gradient(145deg, #785b48, #49372f); }

.world-site-variant-1 { filter: brightness(.96); }
.world-site-variant-2 { filter: hue-rotate(3deg); }
.world-site-variant-3 { filter: saturate(.92); }
.world-site-variant-4 { filter: brightness(1.03); }

.world-site-tile:hover {
    z-index: 5;
    filter: brightness(1.15) saturate(1.08);
    border-color: #e6c477;
    box-shadow: 0 4px 10px rgba(0,0,0,.42), inset 0 0 11px rgba(255,255,255,.08);
}

.world-site-number {
    position: absolute;
    z-index: 6;
    left: 3px;
    top: 3px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 236, 178, .38);
    border-radius: 50%;
    color: #fff0c2;
    background: rgba(25, 21, 14, .7);
    font: 700 8px Arial, sans-serif;
}

.world-site-marker {
    position: absolute;
    inset: 3px;
    z-index: 3;
    transition: opacity .15s ease, filter .15s ease;
}

.world-site-object-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,.58));
}

.world-site-castle .world-site-object-image {
    width: 112%;
    height: 112%;
    margin: -6% 0 0 -6%;
}

.world-site-bandit_camp .world-site-object-image {
    filter: sepia(.25) hue-rotate(322deg) saturate(1.25) drop-shadow(0 4px 3px rgba(0,0,0,.62));
}

.world-site-ruins .world-site-object-image {
    filter: grayscale(.72) sepia(.25) brightness(.72) drop-shadow(0 4px 3px rgba(0,0,0,.65));
}

.world-site-label {
    position: absolute;
    z-index: 7;
    left: 2px;
    right: 2px;
    bottom: 2px;
    padding: 2px 2px;
    overflow: hidden;
    border-radius: 3px;
    color: #fff1c5;
    background: linear-gradient(90deg, rgba(18,17,12,.76), rgba(18,17,12,.48));
    font: 700 7px/1.1 Arial, sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    opacity: .14;
    transition: opacity .15s ease;
}

.world-site-tile:hover .world-site-label,
.world-site-castle .world-site-label,
.world-site-bandit_camp .world-site-label,
.world-site-resource_point .world-site-label,
.world-site-ruins .world-site-label {
    opacity: .92;
}

.world-site-ribbon {
    position: absolute;
    right: 1px;
    top: 3px;
    padding: 2px 3px;
    border: 1px solid currentColor;
    border-radius: 5px;
    font: 700 6px Arial, sans-serif;
    letter-spacing: .05em;
}

.world-site-ribbon.is-mine {
    color: #c8eeff;
    background: rgba(27, 90, 120, .85);
}

.world-site-ribbon.is-foreign {
    color: #ffd5d0;
    background: rgba(112, 35, 31, .87);
}

.world-site-owned {
    border-color: #68c9ef;
    box-shadow: inset 0 0 0 2px rgba(85,183,232,.38), 0 0 7px rgba(85,183,232,.38);
}

.world-site-foreign {
    border-color: #db6a60;
    box-shadow: inset 0 0 0 2px rgba(216,90,80,.34);
}

.world-site-filtered .world-site-marker,
.world-site-filtered .world-site-label {
    opacity: .08 !important;
    filter: grayscale(1);
}

.world-site-filtered {
    cursor: default;
}

.world-site-filtered::after {
    content: "скрыто";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;
    transform: translate(-50%, -50%);
    color: rgba(238, 226, 190, .46);
    font: 7px Arial, sans-serif;
}

.world-overview-panel-v4 {
    height: 130px !important;
    min-height: 0 !important;
    flex: none !important;
    display: grid;
    grid-template-rows: 29px minmax(0, 1fr);
    padding: 4px 12px 8px !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(183, 138, 69, .65) !important;
    box-sizing: border-box;
    background: linear-gradient(90deg, #21170f, #302218 52%, #1e1711) !important;
    box-shadow: 0 -3px 12px rgba(0,0,0,.4);
    transition: height .18s ease;
}

.world-screen-v4 .world-minimap-header {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    margin: 0 !important;
    color: #e9d29e !important;
    font: 11px Arial, sans-serif !important;
}

.world-screen-v4 .world-minimap-header > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.world-screen-v4 .world-minimap-header span {
    display: inline !important;
    overflow: hidden;
    color: #998765 !important;
    font-size: 9px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-screen-v4 .world-minimap-header button {
    height: 23px;
    flex: 0 0 auto;
    padding: 0 9px;
    border-radius: 6px;
    font: 700 9px Arial, sans-serif;
}

.world-minimap-scroll {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #725632 #18130f;
}

.world-screen-v4 .world-minimap {
    width: max-content !important;
    max-width: none !important;
    height: max-content !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(50, 5px) !important;
    grid-template-rows: repeat(20, 4px) !important;
    gap: 1px !important;
    margin: 1px auto !important;
    padding: 5px !important;
    overflow: visible !important;
    border: 1px solid #604729 !important;
    border-radius: 4px;
    background: #111813 !important;
    box-sizing: content-box !important;
    box-shadow: inset 0 0 8px #000;
}

.world-screen-v4 .world-mini-cell {
    width: 5px !important;
    height: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 0 !important;
    opacity: .86;
}

.world-mini-biome-plains { background: #63954b !important; }
.world-mini-biome-forest { background: #2f673a !important; }
.world-mini-biome-mountains { background: #716b62 !important; }
.world-mini-biome-swamp { background: #426961 !important; }
.world-mini-biome-desert { background: #b49361 !important; }

.world-screen-v4 .world-mini-cell:hover {
    opacity: 1;
    filter: brightness(1.65) !important;
    transform: scale(1.7);
    z-index: 4;
}

.world-screen-v4 .world-mini-in-view {
    box-shadow: inset 0 0 0 1px rgba(255, 240, 190, .48);
}

.world-screen-v4 .world-mini-owned {
    background: #55b7e8 !important;
    box-shadow: 0 0 3px #8ee1ff !important;
    opacity: 1;
}

.world-screen-v4 .world-mini-foreign {
    background: hsl(var(--region-owner-hue), 62%, 46%) !important;
    box-shadow: 0 0 2px hsla(var(--region-owner-hue), 75%, 60%, .7);
    opacity: 1;
}

.world-screen-v4 .world-mini-selected {
    outline: 1px solid #fff8dc !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 5px #fff2b0 !important;
    transform: scale(1.8);
    z-index: 5;
}

.world-overview-collapsed .world-overview-panel-v4 {
    height: 34px !important;
    grid-template-rows: 25px 0;
    padding-bottom: 3px !important;
}

.world-overview-collapsed .world-minimap-scroll {
    display: none;
}

.world-hide-coordinates .world-region-coordinate,
.world-hide-coordinates .world-site-number {
    opacity: 0;
}

.world-map-empty-state {
    min-height: 100%;
    display: grid;
    place-items: center;
    color: #ead7a7;
    background: #101611;
    font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .world-region-selected {
        animation: none;
    }

    .world-region-tile,
    .world-site-tile,
    .world-overview-panel-v4 {
        transition: none;
    }
}

@media (max-width: 1240px) {
    .world-main-v4 {
        grid-template-columns: 64px minmax(510px, 1fr) 300px !important;
        padding: 8px !important;
        gap: 8px !important;
    }

    .world-sites-grid {
        grid-template-columns: repeat(5, minmax(46px, 1fr));
        grid-auto-rows: minmax(55px, 1fr);
        padding: 5px;
        gap: 3px;
    }

    .world-screen-v4 .world-search-panel input {
        width: 190px !important;
    }
}

@media (max-width: 980px) {
    .world-topbar-v4 {
        height: auto !important;
        min-height: 68px !important;
        grid-template-columns: minmax(220px, 1fr) auto auto !important;
        gap: 8px !important;
        padding: 6px 9px !important;
    }

    .world-screen-v4 .world-subtitle {
        display: none;
    }

    .world-heading-emblem {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .world-screen-v4 .world-title {
        font-size: 17px !important;
    }

    .world-screen-v4 .world-search-panel input {
        width: 158px !important;
    }

    .world-main-v4 {
        position: relative;
        grid-template-columns: 55px minmax(430px, 1fr) !important;
        grid-template-rows: minmax(250px, 1fr) 178px;
        overflow: hidden;
    }

    .world-viewport-v4 {
        grid-column: 2;
        grid-row: 1;
    }

    .world-screen-v4 .world-nav-panel {
        grid-column: 1;
        grid-row: 1;
        min-height: 196px !important;
    }

    .world-kingdom-panel-v4 {
        grid-column: 1 / 3;
        grid-row: 2;
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .world-kingdom-panel-header {
        min-height: 0;
        border-right: 1px solid rgba(183,138,69,.42);
        border-bottom: 0;
    }

    .world-kingdom-panel-header > div {
        display: block;
    }

    .world-kingdom-panel-header b {
        display: block;
        margin-top: 6px;
        font-size: 24px;
    }

    .world-sites-grid {
        grid-template-columns: repeat(10, minmax(55px, 1fr));
        grid-template-rows: repeat(3, minmax(50px, 1fr));
        grid-auto-rows: minmax(50px, 1fr);
        overflow: auto;
    }

    .world-site-tile {
        min-height: 50px;
    }

    .world-overview-panel-v4 {
        height: 112px !important;
    }
}

@media (max-width: 760px) {
    body.eor-mobile-v3 #worldModal.world-modal,
    body.eor-mobile-app-v2 #worldModal.world-modal,
    body.eor-mobile-app #worldModal.world-modal {
        inset: 42px 0 84px 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.eor-mobile-v3 #worldModal .world-screen-v4,
    body.eor-mobile-app-v2 #worldModal .world-screen-v4,
    body.eor-mobile-app #worldModal .world-screen-v4 {
        width: 100% !important;
        height: calc(100dvh - 126px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 126px) !important;
    }

    body.eor-mobile-v3 #worldModal header.world-topbar-v4,
    body.eor-mobile-app-v2 #worldModal header.world-topbar-v4,
    body.eor-mobile-app #worldModal header.world-topbar-v4,
    .world-topbar-v4 {
        height: 85px !important;
        min-height: 85px !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 42px 39px;
        gap: 3px 6px !important;
        padding: 4px 6px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(183, 138, 69, .7) !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .world-heading-v4 {
        grid-column: 1;
        grid-row: 1;
    }

    .world-heading-emblem {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .world-heading-emblem img {
        width: 21px;
        height: 21px;
    }

    .world-screen-v4 .world-title {
        font-size: 15px !important;
    }

    .world-screen-v4 .world-search-panel {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 100%;
        height: 37px;
    }

    .world-screen-v4 .world-search-panel input {
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
        height: 29px !important;
    }

    .world-screen-v4 .world-search-panel button {
        height: 29px !important;
    }

    .world-screen-v4 .world-top-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .world-screen-v4 .world-top-actions button {
        width: 40px;
        height: 36px;
        border-radius: 6px !important;
    }

    .world-screen-v4 .world-top-actions button > span {
        font-size: 19px;
        line-height: 17px;
    }

    .world-screen-v4 .world-top-actions button > small {
        font-size: 6px;
    }

    .world-screen-v4 .world-filter-panel {
        min-height: 39px;
        padding: 3px 5px !important;
        gap: 4px !important;
    }

    .world-filter-caption {
        display: none;
    }

    .world-screen-v4 .world-filter-button {
        height: 29px !important;
        padding: 0 8px !important;
        font-size: 9px !important;
    }

    .world-main-v4 {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(170px, 1fr) 128px;
        gap: 5px !important;
        padding: 5px !important;
    }

    .world-viewport-v4 {
        grid-column: 1;
        grid-row: 1;
    }

    .world-region-bar {
        min-height: 52px;
        padding: 5px 7px;
    }

    .world-region-bar h2 {
        display: block;
        margin: 3px 0 0 0 !important;
        font-size: 14px !important;
    }

    .world-region-bar p {
        display: none;
    }

    .world-status-chip {
        height: 17px;
        padding: 0 6px;
        font-size: 7px;
    }

    .world-zoom-controls {
        height: 28px;
    }

    .world-screen-v4 .world-zoom-controls button {
        width: 27px;
        height: 27px;
    }

    .world-zoom-controls span {
        width: 38px;
        font-size: 8px;
    }

    .world-region-grid {
        padding: 10px;
        gap: 2px;
    }

    .world-screen-v4 .world-nav-panel {
        position: absolute !important;
        left: 12px;
        bottom: 138px;
        width: auto !important;
        min-height: 0 !important;
        height: 39px;
        display: flex !important;
        flex-direction: row;
        gap: 3px !important;
        padding: 4px !important;
        border-radius: 21px !important;
        z-index: 20;
    }

    .world-compass-north,
    .world-screen-v4 .world-nav-panel > button:first-of-type,
    .world-screen-v4 .world-nav-panel > button:last-of-type {
        display: none;
    }

    .world-screen-v4 .world-nav-panel > div {
        gap: 3px !important;
    }

    .world-screen-v4 .world-nav-panel button,
    .world-screen-v4 .world-nav-panel > div button {
        width: 33px !important;
        min-width: 33px !important;
        height: 31px !important;
        border-radius: 50% !important;
        font-size: 13px !important;
    }

    .world-kingdom-panel-v4 {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .world-kingdom-panel-header {
        padding: 8px;
    }

    .world-kingdom-panel-header span {
        font-size: 7px;
    }

    .world-kingdom-panel-header b {
        margin-top: 3px;
        font-size: 19px;
    }

    .world-kingdom-panel-header small {
        font-size: 8px;
        line-height: 1.25;
    }

    .world-sites-grid {
        grid-template-columns: repeat(10, 52px);
        grid-template-rows: repeat(3, 36px);
        grid-auto-rows: 36px;
        gap: 3px;
        padding: 4px;
    }

    .world-site-tile {
        min-height: 36px;
    }

    .world-site-label {
        display: none;
    }

    .world-site-number {
        min-width: 13px;
        height: 13px;
        font-size: 7px;
    }

    .world-overview-panel-v4 {
        height: 96px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .world-overview-collapsed .world-overview-panel-v4 {
        height: 31px !important;
    }

    .world-screen-v4 .world-minimap-header span {
        display: none !important;
    }

    .world-screen-v4 .world-minimap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-height: 650px) {
    .world-topbar-v4 {
        min-height: 58px !important;
    }

    .world-screen-v4 .world-filter-panel {
        min-height: 36px;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .world-screen-v4 .world-filter-button {
        height: 28px !important;
    }

    .world-overview-panel-v4 {
        height: 92px !important;
    }

    .world-overview-collapsed .world-overview-panel-v4 {
        height: 31px !important;
    }
}