body {
    margin: 0;
    background: #111;
    color: white;
    font-family: Arial, sans-serif;
}

.layout {
    display: flex;
}

.sidebar {
    width: 300px;
    min-height: 100vh;
    background: #161616;
    border-right: 2px solid #333;
    padding: 15px;
    box-sizing: border-box;
}

.panel-title {
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    color: gold;
}

.panel-block {
    background: #202020;
    border: 1px solid #444;
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 8px;
}

.panel-block h3 {
    margin-top: 0;
}

.city-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 15px;
}

#city-map {
    position: relative;
    width: 1400px;
    max-width: 100%;
}

#city-map > img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* =======================
   ЗДАНИЯ
======================= */

.building {
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s;
}

.building:hover {
    transform: scale(1.03);
}

.building img {
    pointer-events: none;
    height: auto;
}

.building-label {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color: white;
}

/* =======================
   РАТУША
======================= */

#townhall {
    top: 120px;
    left: 180px;
}

#townhall img {
    width: 150px;
}

/* =======================
   ЛЕСОПИЛКА
======================= */

#sawmill {
    top: 320px;
    left: 220px;
}

#sawmill img {
    width: 250px;
}

/* =======================
   КАМЕНОЛОМНЯ
======================= */

#quarry {
    top: 220px;
    left: 480px;
}

#quarry img {
    width: 190px;
}

/* =======================
   ШАХТА
======================= */

#mine {
    top: 360px;
    left: 450px;
}

#mine img {
    width: 200px;
}

/* =======================
   СКЛАД
======================= */

#warehouse {
    top: 340px;
    left: 640px;
}

#warehouse img {
    width: 200px;
}

/* =======================
   КАЗАРМА
======================= */

#barracks {
    top: 260px;
    left: 820px;
}

#barracks img {
    width: 200px;
}

/* =======================
   ОКНО ЗДАНИЯ
======================= */

#buildingModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1f1f1f;
    border: 2px solid #555;
    padding: 20px;
    z-index: 999;
    min-width: 300px;
    display: none;
    border-radius: 10px;
}

#buildingModal button {
    margin-top: 10px;
    margin-right: 10px;
    padding: 8px 14px;
    cursor: pointer;
}
/* =======================
   ТАЙМЕР СТРОЙКИ
======================= */

.building-timer {

    position: absolute;

    top: -95px;

    left: 50%;

    transform: translateX(-50%);

    background: #d4a017;

    color: black;

    font-weight: bold;

    padding: 6px 12px;

    border-radius: 8px;

    border: 2px solid #8a6b00;

    white-space: nowrap;

    display: none;

    z-index: 50;
}

/* =======================
   ОКНО РЕГИОНА
======================= */

.modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(
        0,
        0,
        0,
        0.7
    );

    z-index: 5000;
}

.modal-content {

    width: 400px;

    margin: 120px auto;

    background: #1f1f1f;

    border: 2px solid #555;

    border-radius: 10px;

    padding: 20px;

    text-align: center;
}

#loginScreen {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        url("assets/login.jpg");

    background-size: cover;
    background-position: center;

    display: flex;

    z-index: 100000;

    justify-content: center;
    align-items: center;
}

#loginPanel {

    width: 400px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;

    background:
        rgba(
            0,
            0,
            0,
            0.8
        );

    padding: 30px;

    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: 15px;

    text-align: center;
}

#loginForm,
#registerForm {
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

#loginForm {
    display: flex;
}

#loginPanel input {

    padding: 10px;
    font-size: 18px;
    width: 100%;
    box-sizing: border-box;
}

#loginPanel button {

    padding: 10px;

    cursor: pointer;
    width: 100%;
}

/* =======================
   ОКНО АРМИИ
======================= */

.army-modal-content {
    width: 760px;
    max-width: 92%;
    margin: 40px auto;
    background: #1f1f1f;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.army-modal-header,
.army-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.army-modal-header h2,
.army-list-title h3 {
    margin: 0;
}

.army-send-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.army-send-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.army-send-form input,
.army-send-form select {
    padding: 8px;
    background: #111;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
}

.army-send-form button,
.army-modal-content button {
    padding: 8px 14px;
    cursor: pointer;
}

.army-movement-card {
    background: #282828;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.army-movement-title {
    font-size: 18px;
    font-weight: bold;
    color: gold;
    margin-bottom: 8px;
}


/* =======================
   КООРДИНАТЫ МИРА И СЛОТОВ
======================= */

.world-map-hint {
    color: #ddd;
    text-align: center;
    margin: 10px 0 14px 0;
    font-size: 14px;
}

.world-table {
    user-select: none;
}

.world-cell {
    width: 40px;
    height: 40px;
    border: 1px solid #444;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
}

.world-cell-empty {
    background: #111;
    cursor: default;
    border-color: #333;
}

.world-cell-owned {
    outline: 2px solid #fff2a0;
    outline-offset: -2px;
    font-weight: bold;
}

.world-cell-label {
    font-size: 11px;
    color: #111;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.kingdom-map-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    z-index: 9999;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
}

.kingdom-title {
    color: white;
    margin: 20px;
}

.kingdom-help {
    color: #ddd;
    margin: 0 20px 16px 20px;
}

.kingdom-slots-grid {
    display: grid;
    grid-template-columns: repeat(6, 96px);
    gap: 10px;
    margin: 20px;
}

.kingdom-slot {
    width: 96px;
    height: 96px;
    border: 1px solid #555;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.kingdom-slot:hover {
    border-color: #d4af37;
}

.kingdom-slot-number {
    position: absolute;
    top: 4px;
    left: 6px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    background: #d4af37;
    color: #111;
    font-size: 12px;
    font-weight: bold;
}

.kingdom-slot-icon {
    font-size: 32px;
    line-height: 36px;
}

.kingdom-slot-address {
    margin-top: 5px;
    font-size: 11px;
    color: #ddd;
}

.army-movement-ids {
    color: #aaa;
    font-size: 12px;
    margin-bottom: 6px;
}

/* =======================
   МИССИИ
======================= */

.mission-form-note {
    grid-column: 1 / -1;
    color: #ccc;
    background: #151515;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
}

.mission-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mission-status {
    color: #ddd;
    font-size: 14px;
    border: 1px solid #555;
    border-radius: 20px;
    padding: 5px 10px;
    background: #181818;
}

.mission-badge-attack {
    color: #ffcc66;
}

.mission-badge-capture {
    color: #9fd3ff;
}

.mission-badge-reinforce {
    color: #9dff9d;
}

.mission-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #151515;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
}

.mission-grid > div {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    line-height: 1.6;
}

.slot-mission-window {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-mission-content {
    width: 460px;
    max-width: 92%;
    background: #1f1f1f;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 18px;
    box-sizing: border-box;
}

.slot-mission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.slot-mission-header h3 {
    margin: 0;
    color: gold;
}

.slot-mission-note {
    color: #ddd;
    line-height: 1.45;
}

.slot-mission-buttons {
    display: grid;
    gap: 10px;
}

.slot-mission-buttons button,
.slot-mission-header button {
    padding: 10px 12px;
    cursor: pointer;
}

@media (max-width: 760px) {
    .mission-grid {
        grid-template-columns: 1fr;
    }

    .army-send-form {
        grid-template-columns: 1fr;
    }
}

/* =======================
   МИССИИ: СПИСОК ОТДЕЛЬНО ОТ ОТПРАВКИ
======================= */

.missions-only-note {
    color: #ddd;
    background: #151515;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.slot-target-info,
.mission-target-box {
    background: #151515;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    margin-top: 12px;
    color: #ddd;
    line-height: 1.55;
}

.send-mission-content {
    width: 560px;
    max-width: 94%;
    background: #1f1f1f;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 18px;
    box-sizing: border-box;
}

.send-mission-form {
    margin-top: 12px;
}

.send-mission-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.send-mission-actions button {
    padding: 10px 16px;
    cursor: pointer;
    font-weight: bold;
}


/* =======================
   НОВЫЙ ПОЛНОЭКРАННЫЙ МИР
======================= */

.world-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #090b0b;
    color: #f1e5b8;
    overflow: hidden;
}

.world-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 20% 20%, rgba(69, 112, 45, 0.65), transparent 30%),
        radial-gradient(circle at 75% 40%, rgba(83, 67, 38, 0.55), transparent 32%),
        linear-gradient(180deg, #162214 0%, #0d1511 55%, #100d08 100%);
}

.world-topbar {
    height: 74px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    box-sizing: border-box;
    border-bottom: 2px solid #7b6425;
    background: rgba(15, 10, 6, 0.88);
    box-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

.world-title {
    font-size: 28px;
    font-weight: bold;
    color: #ffd96a;
    letter-spacing: 1px;
}

.world-subtitle {
    font-size: 13px;
    color: #d8c58b;
    margin-top: 3px;
}

.world-top-actions {
    display: flex;
    gap: 10px;
}

.world-top-actions button,
.world-info-actions button,
.world-nav-panel button {
    background: linear-gradient(#594622, #2e2412);
    color: #ffe6a3;
    border: 1px solid #9a7b2d;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
}

.world-top-actions button:hover,
.world-info-actions button:hover,
.world-nav-panel button:hover {
    filter: brightness(1.25);
}

.world-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 110px 1fr 310px;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
}

.world-nav-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(12, 8, 4, 0.58);
    border: 1px solid #5e4a1d;
    border-radius: 12px;
}

.world-nav-panel div {
    display: flex;
    gap: 10px;
}

.world-nav-panel button {
    min-width: 42px;
    height: 38px;
}

.world-viewport {
    position: relative;
    overflow: hidden;
    border: 2px solid #8a6c22;
    border-radius: 14px;
    background:
        radial-gradient(circle at 15% 30%, rgba(63, 126, 55, 0.65), transparent 16%),
        radial-gradient(circle at 68% 20%, rgba(48, 112, 151, 0.35), transparent 12%),
        radial-gradient(circle at 75% 78%, rgba(125, 92, 44, 0.48), transparent 20%),
        linear-gradient(135deg, #2b5f31, #496c32 45%, #6a5a30);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.5);
}

.world-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(120deg, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 90px 90px, 130px 130px;
    pointer-events: none;
}

.world-local-grid {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 28px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(7, minmax(88px, 1fr));
    grid-template-rows: repeat(5, minmax(72px, 1fr));
    gap: 12px;
}

.world-local-tile {
    position: relative;
    border: 1px solid rgba(255, 231, 151, 0.35);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.45);
    transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.world-local-tile:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    border-color: #ffe07a;
}

.world-local-empty {
    background: rgba(0,0,0,0.45);
    cursor: default;
}

.world-local-selected {
    border: 3px solid #fff07c;
    box-shadow: 0 0 22px rgba(255, 229, 94, 0.85), inset 0 0 18px rgba(0,0,0,0.35);
}

.world-local-owned {
    outline: 3px solid #ffd23d;
    outline-offset: -6px;
}

.world-local-coord {
    position: absolute;
    top: 6px;
    left: 8px;
    background: rgba(0,0,0,0.55);
    color: #ffe36d;
    border-radius: 8px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: bold;
}

.world-local-icon {
    font-size: 38px;
    text-shadow: 0 3px 4px rgba(0,0,0,0.75);
}

.world-local-name {
    margin-top: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 2px 3px #000;
}

.world-local-biome-name {
    color: rgba(255, 242, 190, 0.72);
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 2px 3px #000;
}

.world-biome-plains { background: linear-gradient(135deg, #347b31, #72a13d); }
.world-biome-forest { background: linear-gradient(135deg, #124f28, #2f7a2e); }
.world-biome-mountains { background: linear-gradient(135deg, #4c4d46, #92886e); }
.world-biome-swamp { background: linear-gradient(135deg, #31492e, #52663a); }
.world-biome-desert { background: linear-gradient(135deg, #9a7137, #caa45c); }

.world-info-panel {
    background: rgba(18, 12, 6, 0.82);
    border: 1px solid #7b6425;
    border-radius: 12px;
    padding: 14px;
    box-sizing: border-box;
    overflow: auto;
}

.world-info-panel h3 {
    color: #ffd96a;
    margin: 0 0 10px 0;
}

.world-info-object {
    width: 86px;
    height: 86px;
    margin: 8px auto 14px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: radial-gradient(circle, rgba(255,219,101,0.22), rgba(0,0,0,0.25));
    border: 1px solid #8a6c22;
}

.world-info-actions {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.world-info-note {
    margin-top: 14px;
    color: #cab77f;
    font-size: 12px;
    line-height: 1.35;
    border-top: 1px solid rgba(255, 219, 101, 0.25);
    padding-top: 10px;
}

.world-bottom-panel {
    flex: 0 0 360px;
    padding: 10px 14px 14px 14px;
    box-sizing: border-box;
    border-top: 2px solid #7b6425;
    background: rgba(12, 8, 4, 0.88);
    overflow: hidden;
}

.world-minimap-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #f4df9b;
    margin-bottom: 8px;
    font-size: 13px;
}

.world-minimap-header span {
    color: #c8b47c;
    font-size: 12px;
}

.world-minimap {
    display: grid;
    grid-template-columns: repeat(50, 16px);
    grid-template-rows: repeat(20, 16px);
    gap: 2px;
    width: max-content;
    max-width: 100%;
    height: auto;
    max-height: 328px;
    overflow: auto;
    border: 1px solid #66501d;
    padding: 6px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.36);
    margin: 0 auto;
}

.world-mini-cell {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.35);
    box-sizing: border-box;
    border-radius: 2px;
}

.world-mini-cell:hover {
    filter: brightness(1.4);
}

.world-mini-empty {
    background: #171717;
    cursor: default;
}

.world-mini-owned {
    background: #d4af37 !important;
    box-shadow: 0 0 5px #ffea80;
}

.world-mini-selected {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
    box-shadow: 0 0 8px #ffffff;
}

@media (max-width: 1100px) {
    .world-main {
        grid-template-columns: 80px 1fr;
    }

    .world-info-panel {
        display: none;
    }

    .world-local-grid {
        grid-template-columns: repeat(5, minmax(70px, 1fr));
        grid-template-rows: repeat(5, minmax(64px, 1fr));
    }

    .world-bottom-panel {
        flex-basis: 300px;
    }

    .world-minimap {
        grid-template-columns: repeat(50, 13px);
        grid-template-rows: repeat(20, 13px);
        max-height: 270px;
    }

    .world-mini-cell {
        width: 13px;
        height: 13px;
    }
}

/* =======================
   НОВЫЙ ЭКРАН МИРА: В ЦЕНТРЕ 30 КЛЕТОК КОРОЛЕВСТВА
======================= */

.world-viewport {
    overflow: auto;
}

.world-kingdom-header {
    position: relative;
    z-index: 1;
    margin: 18px 24px 8px 24px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 219, 101, 0.45);
    border-radius: 10px;
    background: rgba(8, 6, 3, 0.58);
    color: #f4df9b;
}

.world-kingdom-header h2 {
    margin: 0 0 4px 0;
    color: #ffd96a;
    font-size: 22px;
}

.world-kingdom-slots-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(92px, 1fr));
    grid-template-rows: repeat(5, minmax(80px, 1fr));
    gap: 12px;
    padding: 14px 24px 24px 24px;
    box-sizing: border-box;
    min-height: calc(100% - 90px);
}

.world-kingdom-slot {
    position: relative;
    min-height: 82px;
    border: 1px solid rgba(255, 231, 151, 0.38);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #245f2b, #487b31);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.45);
    transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.world-kingdom-slot:hover {
    transform: translateY(-2px);
    filter: brightness(1.18);
    border-color: #ffe07a;
}

.world-kingdom-slot-owned {
    outline: 3px solid #ffd23d;
    outline-offset: -6px;
    box-shadow: 0 0 16px rgba(255, 216, 61, 0.45), inset 0 0 18px rgba(0,0,0,0.35);
}

.world-kingdom-slot-number {
    position: absolute;
    top: 6px;
    left: 8px;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 11px;
    background: #d4af37;
    color: #111;
    font-size: 12px;
    font-weight: bold;
}

.world-kingdom-slot-icon {
    font-size: 32px;
    line-height: 36px;
    text-shadow: 0 3px 4px rgba(0,0,0,0.75);
}

.world-kingdom-slot-address {
    margin-top: 5px;
    color: #fff2be;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 2px 3px #000;
}

.world-bottom-panel {
    flex: 0 0 455px;
}

.world-minimap {
    grid-template-columns: repeat(50, 20px);
    grid-template-rows: repeat(20, 20px);
    gap: 2px;
    max-height: 430px;
}

.world-mini-cell {
    width: 20px;
    height: 20px;
    background: #248a35;
    border: 1px solid rgba(5, 32, 9, 0.75);
}

.world-mini-empty {
    background: #163f1f;
}

.world-mini-owned {
    background: #d4af37 !important;
    border-color: #ffe68a;
    box-shadow: 0 0 7px #ffea80;
}

.world-mini-selected {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
    box-shadow: 0 0 9px #ffffff;
}

@media (max-width: 1100px) {
    .world-kingdom-slots-grid {
        grid-template-columns: repeat(5, minmax(70px, 1fr));
        grid-template-rows: auto;
    }

    .world-bottom-panel {
        flex-basis: 360px;
    }

    .world-minimap {
        grid-template-columns: repeat(50, 14px);
        grid-template-rows: repeat(20, 14px);
        max-height: 310px;
    }

    .world-mini-cell {
        width: 14px;
        height: 14px;
    }
}


/* =======================
   ПРАВКА РАЗМЕРОВ ЭКРАНА МИРА
   Нижняя карта 50x20 уменьшена примерно в 1.5 раза.
   Центральное королевство с 30 секторами получает больше места по высоте.
======================= */

.world-main {
    padding: 10px 14px 8px 14px;
    gap: 12px;
}

.world-viewport {
    min-height: 0;
}

.world-kingdom-header {
    margin: 10px 20px 6px 20px;
    padding: 8px 12px;
}

.world-kingdom-header h2 {
    font-size: 21px;
}

.world-kingdom-slots-grid {
    grid-template-columns: repeat(6, minmax(105px, 1fr));
    grid-template-rows: repeat(5, minmax(96px, 1fr));
    gap: 14px;
    padding: 10px 20px 20px 20px;
    min-height: calc(100% - 72px);
}

.world-kingdom-slot {
    min-height: 96px;
}

.world-kingdom-slot-icon {
    font-size: 36px;
    line-height: 40px;
}

.world-bottom-panel {
    flex: 0 0 300px !important;
    padding: 8px 14px 10px 14px;
}

.world-minimap-header {
    margin-bottom: 6px;
}

.world-minimap {
    grid-template-columns: repeat(50, 13px) !important;
    grid-template-rows: repeat(20, 13px) !important;
    gap: 2px;
    max-height: 260px !important;
    padding: 5px;
}

.world-mini-cell {
    width: 13px !important;
    height: 13px !important;
}

@media (max-width: 1100px) {
    .world-bottom-panel {
        flex-basis: 235px !important;
    }

    .world-minimap {
        grid-template-columns: repeat(50, 10px) !important;
        grid-template-rows: repeat(20, 10px) !important;
        max-height: 205px !important;
    }

    .world-mini-cell {
        width: 10px !important;
        height: 10px !important;
    }

    .world-kingdom-slots-grid {
        grid-template-columns: repeat(5, minmax(80px, 1fr));
        grid-template-rows: repeat(6, minmax(78px, 1fr));
    }
}

/* =======================
   FIX: visible owned kingdoms on minimap
   ======================= */
.world-mini-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    line-height: 1 !important;
    color: #fff4a8 !important;
    font-weight: bold !important;
}

.world-mini-owned {
    background: #ffd23f !important;
    border-color: #fff2a8 !important;
    box-shadow: 0 0 8px #ffe066 !important;
    color: #4a3200 !important;
}

.world-mini-owned.world-mini-selected {
    background: #ffd23f !important;
    outline: 2px solid #ffffff !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 10px #ffffff, 0 0 10px #ffe066 !important;
}

.mission-battle-report {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #6f5f22;
    background: rgba(80, 64, 16, 0.45);
    color: #f3df9c;
    font-size: 13px;
    line-height: 1.35;
}

.mission-battle-extra {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #374f27;
    background: rgba(30, 54, 24, 0.55);
    color: #d8f0c0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .mission-battle-extra {
        grid-template-columns: 1fr;
    }
}

/* =======================
   БОЕВЫЕ ОТЧЁТЫ И ПРОКРУТКА МИССИЙ
======================= */

.army-list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.army-modal-content {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

#armyMovementsList {
    overflow-y: auto;
    max-height: 48vh;
    padding-right: 8px;
}

.battle-reports-window {
    position: fixed;
    inset: 0;
    z-index: 13000;
    background: rgba(0, 0, 0, 0.74);
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-reports-content {
    width: 820px;
    max-width: 94%;
    max-height: 88vh;
    background: #1f1f1f;
    border: 2px solid #666;
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: #eee;
}

.battle-reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.battle-reports-header h3 {
    margin: 0;
    color: gold;
}

.battle-reports-header button {
    padding: 8px 12px;
    cursor: pointer;
}

.battle-reports-note {
    margin-top: 12px;
    background: #151515;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px;
    color: #ddd;
}

.battle-reports-list {
    margin-top: 12px;
    overflow-y: auto;
    padding-right: 8px;
}

.battle-report-card {
    background: #282828;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.battle-report-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #ffdd77;
}

.battle-report-route {
    margin-top: 8px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background: #151515;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
}

.battle-report-text {
    margin-top: 10px;
    line-height: 1.5;
    color: #ddd;
}

.battle-report-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.battle-report-stats > div {
    background: #181818;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
}

@media (max-width: 760px) {
    .battle-report-stats {
        grid-template-columns: 1fr;
    }
}

.kingdom-slot-owned {
    border-color: #ffd23d;
    box-shadow: 0 0 14px rgba(255, 210, 61, 0.6), inset 0 0 14px rgba(255, 210, 61, 0.15);
}

/* =======================
   HUD В СТИЛЕ MY LANDS
   Верхняя панель ресурсов + нижняя панель войск
======================= */

.layout {
    display: block;
    min-height: 100vh;
    padding-top: 86px;
    padding-bottom: 116px;
    box-sizing: border-box;
}

.top-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 74px;
    z-index: 3000;
    display: grid;
    grid-template-columns: 240px 1fr 110px;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(40, 30, 16, 0.98), rgba(18, 15, 11, 0.98));
    border-bottom: 2px solid #8f6f28;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
}

.game-logo {
    color: #ffd76a;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px #000;
    white-space: nowrap;
}

.resource-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.resource-item,
.troop-item,
.hud-action-button {
    border: 1px solid #8f6f28;
    background: linear-gradient(180deg, #2d2618, #17130d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.45);
    border-radius: 10px;
}

.resource-item {
    min-width: 150px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    box-sizing: border-box;
}

.hud-icon,
.hud-action-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    line-height: 1;
    flex: 0 0 auto;
}

.hud-icon img,
.hud-action-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.resource-value {
    color: #f6e5b0;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
}

.logout-button {
    height: 42px;
    cursor: pointer;
    color: #f5e5bc;
    background: #3a2018;
    border: 1px solid #9b6a42;
    border-radius: 8px;
    font-weight: bold;
}

.city-panel {
    min-height: calc(100vh - 202px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 15px 18px 15px;
    box-sizing: border-box;
}

#city-map {
    width: min(1400px, 100%);
}

.bottom-hud {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 3000;
    min-width: min(860px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 2px solid #8f6f28;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(38, 30, 18, 0.97), rgba(13, 11, 8, 0.97));
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.7);
}

.hud-actions,
.troops-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-actions {
    padding-right: 14px;
    border-right: 1px solid #735b25;
}

.hud-action-button {
    width: 92px;
    height: 70px;
    cursor: pointer;
    color: #f6e5b0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: bold;
}

.hud-action-button:hover,
.logout-button:hover {
    filter: brightness(1.18);
}

.troop-item {
    min-width: 145px;
    height: 70px;
    color: #f6e5b0;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.troop-icon {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    font-size: 28px;
}

.troop-name {
    font-size: 13px;
    color: #d6c38c;
}

.troop-count {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
}

#hiddenGameData {
    display: none;
}

.production-modal-content {
    width: 560px;
    max-width: 92%;
    margin: 90px auto;
    background: #1f1f1f;
    border: 2px solid #8f6f28;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.production-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.production-modal-header h2 {
    margin: 0;
    color: #ffd76a;
}

.production-modal-header button {
    padding: 8px 14px;
    cursor: pointer;
}

.production-grid {
    display: grid;
    gap: 10px;
}

.production-row {
    display: grid;
    grid-template-columns: 42px 1fr 130px 110px;
    align-items: center;
    gap: 10px;
    background: #181818;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 12px;
}

.production-row small {
    color: #b6d991;
}

.production-summary {
    margin-top: 16px;
    padding: 12px;
    background: #151515;
    border: 1px solid #444;
    border-radius: 10px;
    color: #ddd;
}

@media (max-width: 900px) {
    .top-hud {
        grid-template-columns: 1fr;
        height: auto;
        position: sticky;
    }

    .resource-bar,
    .bottom-hud,
    .hud-actions,
    .troops-bar {
        flex-wrap: wrap;
    }

    .layout {
        padding-top: 10px;
        padding-bottom: 180px;
    }

    .bottom-hud {
        width: calc(100vw - 24px);
    }

    .hud-actions {
        border-right: none;
        padding-right: 0;
    }

    .production-row {
        grid-template-columns: 36px 1fr;
    }
}

#buildingModal {
    z-index: 6000;
}


/* =======================
   FIX: ГОРОД НА ВЕСЬ ЭКРАН
======================= */
.city-panel {
    min-height: calc(100vh - 202px);
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#city-map {
    position: relative;
    width: 100vw;
    height: calc(100vh - 202px);
    max-width: none;
    overflow: hidden;
    border-radius: 0;
}

#city-map > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    border-radius: 0;
}

/* Масштабирование зданий под размер всей карты */
#townhall,
#sawmill,
#quarry,
#mine,
#warehouse,
#barracks {
    position: absolute;
}

#townhall {
    top: 11.72%;
    left: 11.72%;
    width: 9.77%;
}
#townhall img { width: 100%; }

#sawmill {
    top: 31.25%;
    left: 14.32%;
    width: 16.28%;
}
#sawmill img { width: 100%; }

#quarry {
    top: 21.48%;
    left: 31.25%;
    width: 12.37%;
}
#quarry img { width: 100%; }

#mine {
    top: 35.16%;
    left: 29.30%;
    width: 13.02%;
}
#mine img { width: 100%; }

#warehouse {
    top: 33.20%;
    left: 41.67%;
    width: 13.02%;
}
#warehouse img { width: 100%; }

#barracks {
    top: 25.39%;
    left: 53.39%;
    width: 13.02%;
}
#barracks img { width: 100%; }

@media (max-width: 900px) {
    .layout {
        padding-bottom: 190px;
    }

    .city-panel {
        min-height: calc(100vh - 240px);
    }

    #city-map {
        height: calc(100vh - 240px);
    }

    .building-label {
        font-size: 12px;
        padding: 6px 10px;
    }

    .building-timer {
        top: -78px;
        font-size: 12px;
        padding: 5px 9px;
    }
}


/* =======================
   ICON FILE SUPPORT
======================= */
.title-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
}

.resource-icon img,
.hud-action-icon img,
.troop-icon img,
.production-row .hud-icon img {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75));
}


/* =======================
   FIX: ЗДАНИЯ-ОВЕРЛЕИ ПОД НОВЫЙ ФОН БЕЗ ПОСТРОЕК
   Эти правила стоят в конце файла и перекрывают старые позиции.
======================= */
.building {
    position: absolute;
    cursor: pointer;
    transform-origin: center bottom;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        z-index 0.18s ease;
    filter:
        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.55))
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.75));
}

.building:hover {
    transform: translateY(-5px) scale(1.045);
    filter:
        drop-shadow(0 14px 13px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 12px rgba(255, 215, 106, 0.35));
    z-index: 260;
}

.building img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.building-label {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 82px;
    background: rgba(8, 8, 8, 0.78);
    border: 1px solid rgba(255, 215, 106, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.18;
    white-space: nowrap;
    color: #fff2bd;
    opacity: 0.28;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}

.building:hover .building-label {
    opacity: 1;
    transform: translate(-50%, 0);
    background: rgba(8, 8, 8, 0.92);
}

.building-timer {
    bottom: calc(100% + 54px);
    top: auto;
    z-index: 300;
}

/* Новая расстановка по пустой площадке внутри крепости */
#townhall {
    top: 16.5%;
    left: 16.0%;
    width: 10.8%;
}

#sawmill {
    top: 43.5%;
    left: 17.0%;
    width: 15.2%;
}

#quarry {
    top: 27.0%;
    left: 35.2%;
    width: 12.8%;
}

#mine {
    top: 45.0%;
    left: 34.0%;
    width: 13.3%;
}

#warehouse {
    top: 40.0%;
    left: 48.6%;
    width: 12.4%;
}

#barracks {
    top: 29.0%;
    left: 61.5%;
    width: 13.2%;
}

@media (max-width: 1100px) {
    .building-label {
        font-size: 11px;
        padding: 5px 8px;
        opacity: 0.5;
    }

    .building-timer {
        bottom: calc(100% + 46px);
        font-size: 11px;
        padding: 4px 8px;
    }
}


/* =======================
   РЕЖИМ СТРОИТЕЛЬСТВА: ПЛОЩАДКИ
======================= */
.build-site {
    position: absolute;
    width: 8.6%;
    aspect-ratio: 1 / 0.72;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: 2px dashed rgba(255, 215, 106, 0.62);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 215, 106, 0.22), rgba(30, 23, 12, 0.18) 58%, rgba(0, 0, 0, 0.1));
    color: #fff0b0;
    text-shadow: 0 2px 3px #000;
    box-shadow:
        inset 0 0 18px rgba(255, 215, 106, 0.16),
        0 6px 16px rgba(0, 0, 0, 0.35);
    transform-origin: center bottom;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        background 0.18s ease;
    z-index: 120;
}

.build-site:hover {
    transform: translateY(-4px) scale(1.06);
    filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.5));
    background:
        radial-gradient(circle at center, rgba(255, 215, 106, 0.34), rgba(30, 23, 12, 0.24) 60%, rgba(0, 0, 0, 0.08));
}

.build-site-plus {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 106, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.62);
    color: #ffd76a;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.build-site-label {
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff3c6;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Площадки стоят на тех же местах, где потом появятся здания */
#sawmillSite {
    top: 48.5%;
    left: 20.5%;
}

#quarrySite {
    top: 31.0%;
    left: 37.6%;
}

#mineSite {
    top: 49.0%;
    left: 36.8%;
}

#warehouseSite {
    top: 44.0%;
    left: 51.1%;
}

#barracksSite {
    top: 33.5%;
    left: 64.0%;
}

.build-site-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.68);
    z-index: 6100;
}

.build-site-modal-content {
    width: 360px;
    max-width: 92%;
    margin: 110px auto;
    background: #1f1b13;
    border: 2px solid #8f6f28;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    color: #f6e5b0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
}

.build-site-modal-content h2 {
    margin-top: 0;
    color: #ffd76a;
}

.build-site-help {
    color: #d5c9a8;
}

.build-site-modal-content button {
    margin-top: 10px;
    margin-right: 10px;
    padding: 8px 14px;
    cursor: pointer;
}

@media (max-width: 1100px) {
    .build-site-label {
        font-size: 10px;
    }

    .build-site-plus {
        width: 28px;
        height: 28px;
        font-size: 23px;
    }
}


.build-site-timer {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #d4a017;
    color: #111;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    border: 2px solid #8a6b00;
    white-space: nowrap;
    display: none;
    z-index: 310;
}

.build-site-under-construction {
    border-style: solid;
    border-color: rgba(255, 217, 102, 0.95);
    background:
        radial-gradient(circle at center, rgba(255, 215, 106, 0.38), rgba(30, 23, 12, 0.25) 62%, rgba(0, 0, 0, 0.12));
}

.build-site-under-construction .build-site-plus {
    font-size: 20px;
}

.build-site-under-construction .build-site-plus::before {
    content: "⛏";
}

.build-site-under-construction .build-site-plus {
    color: transparent;
}

.build-site-under-construction .build-site-plus::before {
    color: #ffd76a;
    position: absolute;
}


/* =======================
   ТРЕБОВАНИЯ СТРОИТЕЛЬСТВА
======================= */
.build-site-locked {
    opacity: 0.55;
    filter: grayscale(0.75);
    border-color: rgba(180, 80, 70, 0.85);
    cursor: not-allowed;
}

.build-site-locked:hover {
    transform: none;
    filter: grayscale(0.75) drop-shadow(0 0 8px rgba(180, 80, 70, 0.35));
}

.build-site-locked .build-site-plus {
    background: rgba(80, 25, 20, 0.95);
    border-color: #b96050;
    color: #ffb0a5;
}

.build-site-label small {
    color: #ffb0a5;
    font-size: 10px;
    font-weight: normal;
}

.building-requirement {
    margin: 10px 0;
    padding: 9px 11px;
    border-radius: 8px;
    font-weight: bold;
    line-height: 1.35;
}

.building-requirement-ok {
    color: #d9ffbd;
    background: rgba(44, 92, 30, 0.35);
    border: 1px solid rgba(125, 190, 90, 0.75);
}

.building-requirement-locked {
    color: #ffd0c8;
    background: rgba(100, 30, 24, 0.45);
    border: 1px solid rgba(210, 95, 80, 0.8);
}

#upgradeBtn:disabled,
#buildSiteStartBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.6);
}


/* =======================
   ЗДАНИЕ: СТЕНА ГОРОДА
======================= */
#wall {
    top: 54.0%;
    left: 58.0%;
    width: 18.0%;
    z-index: 116;
}

#wall img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}

#wallSite {
    top: 56.5%;
    left: 62.8%;
}

.building-extra-info {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #5e7840;
    border-radius: 8px;
    background: rgba(30, 45, 22, 0.55);
}

.building-extra-info h3 {
    margin: 0 0 8px 0;
    color: #d9ff9a;
}


/* =======================
   GLOBAL LOADING OVERLAY
======================= */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(45, 34, 18, 0.88), rgba(0, 0, 0, 0.94));
    backdrop-filter: blur(3px);
    color: #f6e5b0;
    user-select: none;
}

.global-loading-box {
    width: min(420px, calc(100vw - 40px));
    padding: 28px 30px;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #8f6f28;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(43, 33, 19, 0.98), rgba(15, 12, 8, 0.98));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.global-loading-emblem {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    border: 2px solid #8f6f28;
    border-radius: 50%;
    background: radial-gradient(circle, #403018, #17110a);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.22);
    animation: loadingPulse 1.4s infinite ease-in-out;
}

.global-loading-title {
    color: #ffd76a;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-shadow: 0 2px 2px #000;
    margin-bottom: 8px;
}

.global-loading-text {
    color: #d8c792;
    font-size: 15px;
    margin-bottom: 18px;
}

.global-loading-bar {
    height: 12px;
    overflow: hidden;
    border: 1px solid #8f6f28;
    border-radius: 999px;
    background: #0f0c08;
}

.global-loading-bar-fill {
    width: 42%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7f5f22, #ffd76a, #7f5f22);
    animation: loadingBarMove 1.05s infinite linear;
}

body.game-loading .layout,
body.game-loading .modal,
body.game-loading #buildingModal,
body.game-loading .world-modal {
    pointer-events: none;
}

@keyframes loadingPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.06); filter: brightness(1.2); }
}

@keyframes loadingBarMove {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(260%); }
}

/* =======================
   РАЗВЕДКА: Экспедиции и Сторожка
======================= */
#expedition {
    top: 49%;
    left: 61%;
    width: 12.5%;
}
#expedition img { width: 100%; }

#guardhouse {
    top: 47%;
    left: 73%;
    width: 11.5%;
}
#guardhouse img { width: 100%; }

#expeditionSite {
    top: 51%;
    left: 63%;
}

#guardhouseSite {
    top: 49%;
    left: 75%;
}

.troops-bar {
    flex-wrap: wrap;
    justify-content: center;
}

.troop-item {
    min-width: 128px;
}


/* =======================
   FIX: НИЖНЯЯ ПАНЕЛЬ В ОДИН РЯД
======================= */
.bottom-hud {
    width: min(1180px, calc(100vw - 28px));
    min-width: 0;
    max-width: calc(100vw - 28px);
    gap: 14px;
    padding: 12px 20px;
    justify-content: center;
}

.hud-actions,
.troops-bar {
    flex-wrap: nowrap;
}

.hud-actions {
    flex: 0 0 auto;
}

.troops-bar {
    flex: 0 1 auto;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
}

.troop-item {
    min-width: 128px;
    width: 128px;
    flex: 0 0 128px;
}

.hud-action-button {
    width: 92px;
    flex: 0 0 92px;
}

@media (max-width: 1180px) {
    .bottom-hud {
        width: calc(100vw - 20px);
        gap: 9px;
        padding: 10px 12px;
    }

    .hud-actions {
        gap: 7px;
        padding-right: 10px;
    }

    .troops-bar {
        gap: 7px;
    }

    .hud-action-button {
        width: 82px;
        height: 66px;
        flex-basis: 82px;
        font-size: 13px;
    }

    .troop-item {
        min-width: 116px;
        width: 116px;
        flex-basis: 116px;
        height: 66px;
        padding: 7px 9px;
        grid-template-columns: 34px 1fr;
    }

    .troop-icon {
        width: 34px;
        height: 34px;
    }

    .troop-name {
        font-size: 12px;
    }

    .troop-count {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .bottom-hud,
    .hud-actions,
    .troops-bar {
        flex-wrap: wrap;
    }
}

/* =======================
   FIX: ЕДИНЫЙ МАСШТАБ И КРАСИВАЯ РАССТАНОВКА ЗДАНИЙ
   Старые здания подогнаны под размер Экспедиции / Сторожки.
======================= */
#townhall,
#sawmill,
#quarry,
#mine,
#warehouse,
#market,
#barracks,
#wall,
#expedition,
#guardhouse {
    position: absolute;
    transform-origin: center bottom;
}

#townhall img,
#sawmill img,
#quarry img,
#mine img,
#warehouse img,
#market img,
#barracks img,
#wall img,
#expedition img,
#guardhouse img {
    width: 100%;
    height: auto;
    display: block;
}

/* Верхний ряд: главное здание и военные постройки */
#townhall {
    top: 17.0%;
    left: 17.0%;
    width: 9.4%;
    z-index: 112;
}

#quarry {
    top: 27.0%;
    left: 37.5%;
    width: 10.5%;
    z-index: 116;
}

#barracks {
    top: 27.5%;
    left: 62.5%;
    width: 10.4%;
    z-index: 118;
}

/* Средний ряд: добыча и склад */
#sawmill {
    top: 43.0%;
    left: 18.0%;
    width: 10.8%;
    z-index: 124;
}

#mine {
    top: 43.0%;
    left: 34.5%;
    width: 10.4%;
    z-index: 126;
}

#warehouse {
    top: 39.2%;
    left: 50.2%;
    width: 9.8%;
    z-index: 122;
}

/* Нижний/правый ряд: стена, разведка и защита */
#wall {
    top: 51.2%;
    left: 59.0%;
    width: 15.4%;
    z-index: 132;
}

#expedition {
    top: 44.8%;
    left: 67.2%;
    width: 10.2%;
    z-index: 130;
}

#guardhouse {
    top: 43.8%;
    left: 77.8%;
    width: 9.8%;
    z-index: 128;
}

/* Площадки ставим примерно в центр будущих зданий */
#sawmillSite {
    top: 46.5%;
    left: 21.8%;
}

#quarrySite {
    top: 30.5%;
    left: 41.2%;
}

#mineSite {
    top: 46.6%;
    left: 38.0%;
}

#warehouseSite {
    top: 42.3%;
    left: 53.5%;
}

#barracksSite {
    top: 31.0%;
    left: 66.2%;
}

#wallSite {
    top: 55.0%;
    left: 64.8%;
}

#expeditionSite {
    top: 48.0%;
    left: 70.7%;
}

#guardhouseSite {
    top: 47.2%;
    left: 81.2%;
}

/* Подписи чуть компактнее, чтобы не забивали карту */
.building-label {
    top: -34px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.15;
    border-radius: 7px;
    opacity: 0.48;
}

.building:hover .building-label {
    opacity: 1;
}

.building-timer {
    bottom: calc(100% + 38px);
    top: auto;
}

/* Небольшой эффект глубины: нижние здания визуально поверх верхних */
.building:hover {
    transform: scale(1.035);
    z-index: 250 !important;
}

/* =======================
   МИССИИ И ОТЧЁТЫ V2: СВЁРНУТЫЕ КАРТОЧКИ
======================= */
.collapsed-card {
    padding: 0;
    overflow: hidden;
}

.collapsed-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    user-select: none;
}

.collapsed-card-summary:hover {
    background: rgba(255, 215, 100, 0.06);
}

.collapsed-card-line {
    margin-top: 4px;
    color: #d7d0bd;
    font-size: 13px;
    line-height: 1.35;
}

.collapsed-card-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.collapsed-card-arrow {
    color: #f0cf77;
    font-size: 16px;
    transition: transform 0.18s ease;
}

.collapsed-card-details {
    display: none;
    padding: 0 12px 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.collapsed-card.is-open .collapsed-card-details {
    display: block;
}

.collapsed-card.is-open .collapsed-card-arrow {
    transform: rotate(180deg);
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.mission-grid > div {
    background: #181818;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
}

.battle-reports-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.battle-reports-toolbar button,
.battle-reports-pagination button {
    padding: 7px 12px;
    cursor: pointer;
}

.battle-report-summary {
    align-items: stretch;
}

.battle-report-checkbox-wrap {
    width: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    cursor: pointer;
    flex: 0 0 auto;
}

.battleReportCheckbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.battle-report-summary-main {
    flex: 1;
    min-width: 0;
}

.battle-report-route.compact {
    margin-top: 6px;
    font-size: 14px;
    text-align: left;
    padding: 6px 8px;
}

.battle-reports-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    color: #f0dfaa;
}

@media (max-width: 760px) {
    .mission-grid {
        grid-template-columns: 1fr;
    }

    .collapsed-card-summary {
        align-items: flex-start;
    }

    .collapsed-card-right {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* =======================
   Защита новичка
======================= */
.newbie-protection-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 8px;
    border: 1px solid #7da7ff;
    border-radius: 8px;
    background: rgba(55, 88, 160, 0.28);
    color: #cfe0ff;
    font-weight: bold;
}

.newbie-protection-note {
    border: 1px solid #7da7ff;
    background: rgba(44, 70, 128, 0.35);
    color: #e7efff;
    padding: 12px;
    border-radius: 10px;
    line-height: 1.45;
}

/* =======================
   World objects v2
======================= */
.resource-point-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 215, 106, 0.25);
}

.resource-point-actions button {
    padding: 8px 12px;
    border: 1px solid #8f6f28;
    border-radius: 8px;
    background: linear-gradient(180deg, #2d2618, #17130d);
    color: #f6e5b0;
    cursor: pointer;
    font-weight: bold;
}

.resource-point-actions button:hover {
    filter: brightness(1.15);
}


/* =======================
   GAME NOTIFICATIONS
======================= */
#gameNotificationRoot {
    position: fixed;
    right: 22px;
    top: 92px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.game-notification {
    min-width: 260px;
    max-width: 420px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #8f6f28;
    background: linear-gradient(180deg, rgba(38, 30, 18, 0.98), rgba(13, 11, 8, 0.98));
    color: #f8e6b4;
    font-weight: bold;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
    transform: translateX(24px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.game-notification-visible {
    transform: translateX(0);
    opacity: 1;
}

.game-notification-error {
    border-color: #b45245;
    color: #ffd1c9;
}

.game-notification-success {
    border-color: #7aa55c;
    color: #dff4c2;
}

.game-notification-warning {
    border-color: #c69b3c;
    color: #ffe2a1;
}

@media (max-width: 900px) {
    #gameNotificationRoot {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .game-notification {
        min-width: 0;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }
}

/* =======================
   WORLD MAP TOOLS V2
======================= */
.world-topbar {
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 14px;
}

.world-search-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid #6f5521;
    border-radius: 10px;
    padding: 8px;
}

.world-search-panel input {
    width: 170px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #80652c;
    background: #15120d;
    color: #f6e5b0;
    font-weight: bold;
    outline: none;
}

.world-search-panel input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

.world-search-panel button,
.world-filter-button {
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #80652c;
    background: linear-gradient(180deg, #342815, #17120b);
    color: #f6e5b0;
    font-weight: bold;
}

.world-search-panel button {
    height: 34px;
    padding: 0 12px;
}

.world-filter-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(143, 111, 40, 0.55);
    background: rgba(18, 14, 8, 0.82);
}

.world-filter-button {
    min-width: 82px;
    height: 34px;
    opacity: 0.48;
    transition: filter 0.15s, transform 0.15s, opacity 0.15s;
}

.world-filter-button.active {
    opacity: 1;
    border-color: #d4af37;
    background: linear-gradient(180deg, #5b451c, #22180b);
    color: #fff0b8;
}

.world-filter-button.utility {
    min-width: 110px;
    opacity: 0.9;
}

.world-filter-button:hover,
.world-search-panel button:hover {
    filter: brightness(1.18);
    transform: translateY(-1px);
}

.world-kingdom-slot-foreign {
    border-color: #b34d3e !important;
}

.world-slot-bandit {
    border-color: #7c4b4b;
    box-shadow: inset 0 0 12px rgba(120, 20, 20, 0.25);
}

.world-slot-resource {
    border-color: #4d8d62;
    box-shadow: inset 0 0 12px rgba(45, 120, 55, 0.22);
}

.world-slot-my {
    border-color: #d4af37;
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.22);
}

.world-empty-filter-result {
    grid-column: 1 / -1;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0dca0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed #80652c;
    border-radius: 12px;
}

.world-mini-foreign {
    background: #8a2c28 !important;
    color: #fff0e8;
}

.legend-owned {
    color: #ffe16a;
}

.legend-foreign {
    color: #ff8b7e;
}

@media (max-width: 1100px) {
    .world-topbar {
        grid-template-columns: 1fr;
    }

    .world-search-panel {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =======================
   ОЧЕРЕДИ СТРОИТЕЛЬСТВА И ОБУЧЕНИЯ V2
======================= */
.queue-card,
.construction-card {
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid #6f5a2a;
    border-radius: 10px;
    padding: 10px;
    margin: 8px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.35);
}

.queue-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #f5e4b2;
}

.queue-card-sub {
    margin-top: 6px;
    color: #d8c99a;
    font-size: 14px;
}

.queue-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.queue-status-active {
    background: #2d5f2d;
    color: #dfffdc;
    border: 1px solid #4d974d;
}

.queue-status-wait {
    background: #4f4523;
    color: #ffe6a2;
    border: 1px solid #9f862d;
}

.small-danger-button {
    margin-top: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid #9b5b4a;
    background: #3b1d18;
    color: #ffd8cc;
    font-weight: bold;
}

.small-danger-button:hover {
    filter: brightness(1.18);
}

#trainingQueue {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.active-construction-card b {
    color: #ffd76a;
}


/* =======================
   FIX: НАЙМ ТОЛЬКО В НУЖНЫХ ЗДАНИЯХ + ШИРОКОЕ ОКНО
======================= */
#buildingModal {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    box-sizing: border-box;
}

#buildingModal.building-modal-training {
    width: min(980px, calc(100vw - 36px));
}

.training-block {
    margin-top: 14px;
}

.building-training-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #6f5522;
    border-radius: 12px;
    background: rgba(20, 17, 12, 0.82);
}

.building-training-panel h3,
.training-block h3 {
    margin: 0 0 12px 0;
    color: #ffd76a;
}

.recruit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.recruit-grid-single {
    grid-template-columns: minmax(260px, 420px);
}

.recruit-card {
    background: linear-gradient(180deg, #2b2418, #15110b);
    border: 1px solid #7c612b;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
}

.recruit-title {
    color: #f6e5b0;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

.recruit-description {
    color: #cdbf9a;
    font-size: 13px;
    min-height: 34px;
    margin-bottom: 10px;
}

.recruit-card input {
    width: 92px;
    padding: 8px;
    margin-right: 8px;
    background: #111;
    color: white;
    border: 1px solid #665027;
    border-radius: 8px;
}

#trainingQueue {
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
}

#trainingQueue:empty {
    display: block;
}

.queue-card {
    margin: 0;
}

@media (max-width: 760px) {
    #buildingModal.building-modal-training {
        width: calc(100vw - 24px);
    }

    .recruit-grid,
    .recruit-grid-single,
    #trainingQueue {
        grid-template-columns: 1fr;
    }
}


/* =======================
   ОКНО СОБЫТИЙ ИГРОКА
======================= */
.events-action-button {
    position: relative;
}

.hud-badge {
    position: absolute;
    top: 4px;
    right: 7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #c83030;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
}

.player-events-window {
    position: fixed;
    inset: 0;
    z-index: 7600;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.player-events-content {
    width: min(820px, 96vw);
    max-height: 86vh;
    overflow: auto;
    background: linear-gradient(180deg, #261f15, #11100d);
    border: 2px solid #8f6f28;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #f6e5b0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
}

.player-events-header,
.player-events-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.player-events-header h3 {
    margin: 0;
    color: #ffd76a;
}

.player-events-toolbar {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.player-events-toolbar button,
.player-events-header button {
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid #8f6f28;
    border-radius: 8px;
    background: #2d2618;
    color: #f6e5b0;
    font-weight: bold;
}

.player-events-list {
    display: grid;
    gap: 10px;
}

.player-event-card {
    border: 1px solid #5d4b25;
    border-radius: 10px;
    background: rgba(22, 18, 12, 0.95);
    padding: 12px;
}

.player-event-card.unread {
    border-color: #d7b64a;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 106, 0.18);
}

.player-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.player-event-title {
    font-weight: bold;
    color: #ffffff;
}

.player-event-time {
    color: #c9b883;
    font-size: 12px;
    white-space: nowrap;
}

.player-event-message {
    color: #e7d7a3;
    white-space: pre-wrap;
}

.player-event-empty {
    text-align: center;
    color: #c9b883;
    padding: 24px;
    border: 1px dashed #5d4b25;
    border-radius: 10px;
}


/* =======================
   LIVE HUD BADGES V1
======================= */
.hud-action-button {
    position: relative;
}

.hud-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d43b2f;
    color: #fff;
    border: 2px solid #2a1b0f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.55);
    font-size: 12px;
    line-height: 20px;
    font-weight: 900;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 20;
}

.hud-badge-missions {
    background: #2f7fd4;
    right: 19px;
}

.hud-badge-reports {
    background: #d4a02f;
    right: -8px;
}

.events-action-button .hud-badge {
    background: #7a4bd8;
}

.hud-button-has-news {
    filter: brightness(1.12);
    box-shadow: 0 0 12px rgba(230, 190, 70, 0.42), inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.45);
}

.hud-live-hint {
    position: absolute;
    left: 50%;
    bottom: 94px;
    transform: translateX(-50%);
    padding: 6px 10px;
    border: 1px solid #8f6f28;
    border-radius: 10px;
    background: rgba(22, 17, 11, 0.9);
    color: #f6e5b0;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

/* =======================
   ПОЧТА / ЛИЧНЫЕ СООБЩЕНИЯ
======================= */
.mail-modal-content {
    width: 820px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: auto;
    margin: 46px auto;
    background: linear-gradient(180deg, #242017, #15120d);
    border: 2px solid #8f6f28;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #f6e5b0;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.78);
}

.mail-header,
.mail-list-toolbar,
.mail-search-row,
.mail-pagination,
.mail-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mail-header {
    justify-content: space-between;
    margin-bottom: 12px;
}

.mail-header h2,
.mail-panel h3 {
    margin: 0;
    color: #ffd76a;
}

.mail-tabs {
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #735b25;
    margin-bottom: 14px;
}

.mail-tabs button,
.mail-header button,
.mail-list-toolbar button,
.mail-search-row button,
.mail-panel button,
.mail-pagination button {
    cursor: pointer;
    border: 1px solid #8f6f28;
    background: linear-gradient(180deg, #2d2618, #17130d);
    color: #f6e5b0;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: bold;
}

.mail-tabs button:hover,
.mail-header button:hover,
.mail-list-toolbar button:hover,
.mail-search-row button:hover,
.mail-panel button:hover,
.mail-pagination button:hover {
    filter: brightness(1.18);
}

.mail-tabs .mail-tab-active,
.mail-pagination .mail-page-active {
    background: linear-gradient(180deg, #7b5f22, #3d2d10);
    color: #ffffff;
}

.mail-panel label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    color: #d6c38c;
    font-weight: bold;
}

.mail-panel input,
.mail-panel textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0e0d0a;
    color: #f8edc8;
    border: 1px solid #6b5423;
    border-radius: 8px;
    padding: 10px;
    font-size: 15px;
}

.mail-panel textarea {
    min-height: 160px;
    resize: vertical;
}

.mail-list-toolbar {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.mail-list {
    display: grid;
    gap: 10px;
}

.mail-message,
.mail-player-row,
.mail-empty {
    border: 1px solid #4d4226;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px;
}

.mail-message-unread {
    border-color: #d6a93d;
    box-shadow: 0 0 0 1px rgba(214, 169, 61, 0.25);
}

.mail-message-head {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.mail-message-head input {
    width: 16px;
    height: 16px;
}

.mail-message-subject {
    color: #ffffff;
    font-weight: bold;
    margin-top: 3px;
}

.mail-message-head span {
    color: #b8a77b;
    font-size: 13px;
    white-space: nowrap;
}

.mail-message-body {
    margin-top: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    color: #fff5cf;
    line-height: 1.45;
}

.mail-pagination {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mail-search-row {
    margin: 12px 0;
}

.mail-search-row input {
    flex: 1;
}

.mail-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mail-player-row small {
    display: block;
    margin-top: 4px;
    color: #b8a77b;
}

.mail-player-row button:disabled {
    opacity: 0.45;
    cursor: default;
}

.hud-action-alert {
    border-color: #d7b14e !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 14px rgba(215, 177, 78, 0.35) !important;
}

@media (max-width: 900px) {
    .mail-modal-content {
        width: 96vw;
        margin: 20px auto;
    }

    .mail-message-head {
        grid-template-columns: 24px 1fr;
    }

    .mail-message-head span {
        grid-column: 2;
        white-space: normal;
    }

    .mail-player-row,
    .mail-search-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =======================
   РЕЙТИНГ И ПРОФИЛЬ ИГРОКА
======================= */
.ranking-modal-content {
    width: 980px;
    max-width: 96%;
    max-height: 90vh;
    overflow: auto;
    margin: 36px auto;
    background: #1f1f1f;
    border: 2px solid #8f6f28;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #f4e5bb;
}

.ranking-header,
.ranking-tabs,
.ranking-profile-header,
.ranking-profile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ranking-header h2,
.ranking-profile-header h3 {
    margin: 0;
    color: #ffd76a;
}

.ranking-tabs {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 14px 0;
}

.ranking-tabs button,
.ranking-header button,
.ranking-small-button,
.ranking-profile-header button,
.ranking-profile-actions button {
    cursor: pointer;
    color: #f6e5b0;
    background: linear-gradient(180deg, #2d2618, #17130d);
    border: 1px solid #8f6f28;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: bold;
}

.ranking-tabs button:hover,
.ranking-header button:hover,
.ranking-small-button:hover,
.ranking-profile-header button:hover,
.ranking-profile-actions button:hover {
    filter: brightness(1.18);
}

.ranking-tab-active {
    background: linear-gradient(180deg, #6d501c, #2d210e) !important;
    color: #ffffff !important;
}

.ranking-help {
    color: #cdbb84;
    font-size: 13px;
    margin-bottom: 12px;
}

.ranking-list {
    display: grid;
    gap: 8px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 66px minmax(220px, 1fr) 120px 120px 96px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #4e4227;
    border-radius: 10px;
    background: #181818;
}

.ranking-row-me {
    border-color: #d4af37;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28) inset;
}

.ranking-place {
    font-size: 20px;
    color: #ffd76a;
    font-weight: bold;
    text-align: center;
}

.ranking-player-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ranking-player-name {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.ranking-player-name:hover {
    color: #ffd76a;
}

.ranking-player-main small,
.ranking-score small {
    color: #b7aa82;
}

.ranking-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.ranking-score b {
    color: #ffffff;
    font-size: 18px;
}

.ranking-score-total b {
    color: #ffd76a;
}

.ranking-empty {
    padding: 16px;
    background: #181818;
    border: 1px solid #444;
    border-radius: 10px;
    color: #ddd;
}

.ranking-profile-panel {
    margin-top: 16px;
    padding: 14px;
    background: #141414;
    border: 1px solid #7d6427;
    border-radius: 12px;
}

.ranking-profile-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.ranking-profile-summary div {
    background: #202020;
    border: 1px solid #4e4227;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.ranking-profile-summary b {
    display: block;
    font-size: 22px;
    color: #ffffff;
}

.ranking-profile-summary span {
    color: #b7aa82;
    font-size: 12px;
}

.ranking-profile-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ranking-profile-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ranking-profile-section {
    background: #1b1b1b;
    border: 1px solid #403820;
    border-radius: 10px;
    padding: 12px;
}

.ranking-profile-section h4 {
    margin: 0 0 10px 0;
    color: #ffd76a;
}

.ranking-profile-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ranking-profile-line:last-child {
    border-bottom: none;
}

.ranking-profile-grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ranking-profile-grid-four div {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

@media (max-width: 900px) {
    .ranking-row {
        grid-template-columns: 50px 1fr;
    }

    .ranking-score,
    .ranking-small-button {
        grid-column: 2;
        align-items: flex-start;
    }

    .ranking-profile-summary,
    .ranking-profile-columns,
    .ranking-profile-grid-four {
        grid-template-columns: 1fr;
    }
}


/* =======================
   НАСТРОЙКИ ИГРОКА V1
======================= */
.settings-modal-content {
    width: 720px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: auto;
    margin: 55px auto;
    background: linear-gradient(180deg, #252018, #15120d);
    border: 2px solid #8f6f28;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #f6e5b0;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7);
}

.settings-header,
.settings-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.settings-header h2 {
    margin: 0;
    color: #ffd76a;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #d6c38c;
    font-weight: bold;
}

.settings-grid input,
.settings-grid textarea {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #735b25;
    background: #111;
    color: #fff;
    box-sizing: border-box;
}

.settings-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.settings-wide {
    grid-column: 1 / -1;
}

.settings-checkbox-row {
    flex-direction: row !important;
    align-items: center;
    background: rgba(0,0,0,0.18);
    border: 1px solid #4d3f20;
    border-radius: 10px;
    padding: 10px;
}

.settings-checkbox-row input {
    width: 18px;
    height: 18px;
}

.settings-actions {
    justify-content: flex-end;
    margin-top: 16px;
}

.settings-actions button,
.settings-header button {
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid #8f6f28;
    background: linear-gradient(180deg, #3a2c18, #19130d);
    color: #f6e5b0;
    font-weight: bold;
}

.settings-actions button:hover,
.settings-header button:hover {
    filter: brightness(1.18);
}

.settings-note {
    margin-top: 14px;
    color: #b9aa7a;
    font-size: 13px;
}

@media (max-width: 760px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================
   FIX: Рейтинг и Настройки сверху возле ресурсов
======================= */
.top-hud {
    grid-template-columns: 210px minmax(520px, 1fr) auto 98px;
}

.top-hud-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.top-hud-button {
    height: 46px;
    min-width: 106px;
    padding: 0 12px;
    border: 1px solid #8f6f28;
    border-radius: 10px;
    background: linear-gradient(180deg, #2d2618, #17130d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.45);
    color: #f6e5b0;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.top-hud-button:hover {
    filter: brightness(1.18);
}

.top-hud-button-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
}

/* После переноса верхних кнопок нижняя панель может быть чуть компактнее */
.bottom-hud {
    width: min(1040px, calc(100vw - 28px));
}

@media (max-width: 1180px) {
    .top-hud {
        grid-template-columns: 180px minmax(420px, 1fr) auto 90px;
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .resource-item {
        min-width: 125px;
    }

    .top-hud-button {
        min-width: 92px;
        padding: 0 9px;
        font-size: 13px;
    }

    .game-logo {
        font-size: 18px;
    }
}

@media (max-width: 900px) {
    .top-hud {
        grid-template-columns: 1fr;
        height: auto;
        position: sticky;
    }

    .top-hud-actions {
        flex-wrap: wrap;
    }
}


/* =======================
   СТАРТОВЫЕ ЗАДАНИЯ
======================= */
.quests-modal-content {
    width: 780px;
    max-width: 94%;
    max-height: 86vh;
    overflow: auto;
    margin: 45px auto;
    background: #1f1f1f;
    border: 2px solid #8f6f28;
    border-radius: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #f6e5b0;
}

.quests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.quests-header h2 {
    margin: 0;
    color: #ffd76a;
}

.quests-header button,
.quest-claim-btn,
.quest-go-btn {
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #8f6f28;
    background: #2d2618;
    color: #f6e5b0;
    font-weight: bold;
}

.quest-claim-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.quests-help {
    color: #d7c38b;
    margin-bottom: 14px;
}

.quest-advisor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #b78e32;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(143, 111, 40, 0.28), rgba(31, 31, 31, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.quest-advisor:empty {
    display: none;
}

.quest-advisor > div:first-child {
    display: grid;
    gap: 3px;
}

.quest-advisor-kicker {
    color: #d9bc69;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quest-advisor small {
    color: #ddd0aa;
}

.quest-advisor-complete {
    display: block !important;
    color: #bfe3a7;
}

.quests-list {
    display: grid;
    gap: 10px;
}

.quest-card {
    background: linear-gradient(180deg, #242018, #15130f);
    border: 1px solid #514327;
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.quest-card.quest-ready {
    border-color: #d7b84d;
    box-shadow: 0 0 14px rgba(215, 184, 77, 0.22);
}

.quest-card.quest-completed {
    opacity: 0.72;
}

.quest-main {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.quest-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffe08a;
    margin-bottom: 4px;
}

.quest-description {
    color: #ddd0aa;
    font-size: 14px;
    margin-bottom: 6px;
}

.quest-reward {
    color: #a9d68e;
    font-size: 13px;
}

.quest-status {
    min-width: 92px;
    text-align: right;
    color: #ffffff;
    font-weight: bold;
}

.quest-progress-bar {
    height: 9px;
    margin-top: 10px;
    background: #111;
    border: 1px solid #3e3320;
    border-radius: 999px;
    overflow: hidden;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8f6f28, #ffd76a);
}

.quest-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.quest-go-btn {
    border-color: #567747;
    background: #1f3220;
    color: #cceeb6;
}

.quest-go-btn:hover {
    background: #29442a;
}

@media (max-width: 620px) {
    .quest-advisor {
        align-items: stretch;
        flex-direction: column;
    }

    .quest-advisor button {
        width: 100%;
    }

    .quest-main {
        gap: 8px;
    }

    .quest-status {
        min-width: 70px;
    }
}

.quests-empty {
    padding: 18px;
    text-align: center;
    color: #d7c38b;
}


/* MARKET V1 */
#market {
    top: 30.5%;
    left: 50.5%;
    width: 9.8%;
    z-index: 119;
}

#market img {
    width: 100%;
}

#marketSite {
    top: 34.0%;
    left: 54.0%;
}

#market .building-label::before,
#marketSite .build-site-label::before {
    content: "🏪 ";
}


/* MARKET V1 PATCH — добавь в frontend/style.css */

.market-panel {
    padding: 16px;
}

.market-info,
.market-resources,
.market-form,
.market-history-item {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.18);
}

.market-form {
    display: grid;
    gap: 8px;
    max-width: 360px;
}

.market-form select,
.market-form input,
.market-form button {
    padding: 8px;
    border-radius: 6px;
}

.market-preview {
    margin-top: 6px;
    font-weight: bold;
}

.market-error {
    color: #ff7777;
    font-weight: bold;
}

.market-history-item span {
    display: block;
    opacity: 0.75;
    font-size: 12px;
    margin-top: 4px;
}

/* MARKET MODAL FIX */
.market-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.market-modal {
    position: relative;
    width: 540px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: rgba(12, 12, 12, 0.97);
    border: 1px solid #8b6b2a;
    border-radius: 14px;
    padding: 18px;
    color: #f1e2b8;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
}

.market-modal-content h2 {
    margin: 0 36px 14px 0;
    color: #ffe08a;
}

.market-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #8b6b2a;
    background: #2b1b0c;
    color: #fff2bd;
    cursor: pointer;
    font-size: 22px;
    line-height: 28px;
}

.market-modal-close:hover {
    background: #4a2d11;
}

.market-modal .market-info,
.market-modal .market-resources,
.market-modal .market-form,
.market-modal .market-history-item {
    border: 1px solid rgba(255, 224, 138, 0.22);
    border-radius: 9px;
    padding: 10px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.24);
}

.market-modal .market-form {
    display: grid;
    gap: 8px;
}

.market-modal .market-form label {
    color: #ffe08a;
    font-weight: bold;
}

.market-modal .market-form select,
.market-modal .market-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px;
    background: #151515;
    color: #fff;
    border: 1px solid #5f5135;
    border-radius: 7px;
}

.market-modal .market-form button {
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #b9923c;
    background: linear-gradient(180deg, #7b571c, #4c310f);
    color: #fff4c8;
    font-weight: bold;
    cursor: pointer;
}

.market-modal .market-form button:hover {
    filter: brightness(1.12);
}

.market-modal .market-preview {
    margin-top: 6px;
    font-weight: bold;
    color: #a9d68e;
}

.market-modal .market-error {
    color: #ff7777;
    font-weight: bold;
}

.market-modal .market-hint {
    color: #d8c28a;
    font-size: 13px;
}

.market-modal .market-history-item span {
    display: block;
    opacity: 0.75;
    font-size: 12px;
    margin-top: 4px;
}

/* =========================================================
   BUILDING LAYOUT FIX v1
   Новая расстановка зданий по скриншоту: меньше наложений,
   рынок отдельно от склада, стена ниже, правый сектор свободнее.
   Этот блок стоит в самом конце файла и перекрывает старые координаты.
========================================================= */
#townhall,
#sawmill,
#quarry,
#mine,
#warehouse,
#market,
#barracks,
#wall,
#expedition,
#guardhouse {
    position: absolute;
    transform-origin: center bottom;
}

#townhall img,
#sawmill img,
#quarry img,
#mine img,
#warehouse img,
#market img,
#barracks img,
#wall img,
#expedition img,
#guardhouse img {
    width: 100%;
    height: auto;
    display: block;
}

/* Верх / левый сектор */
#townhall {
    top: 16.0%;
    left: 17.0%;
    width: 9.2%;
    z-index: 112;
}

#quarry {
    top: 26.2%;
    left: 38.8%;
    width: 10.4%;
    z-index: 116;
}

/* Рынок вынесен отдельно, чтобы не накладывался на склад */
#market {
    top: 25.0%;
    left: 51.8%;
    width: 10.4%;
    z-index: 120;
}

/* Правый верхний сектор */
#barracks {
    top: 24.8%;
    left: 66.6%;
    width: 10.2%;
    z-index: 118;
}

/* Нижний / средний сектор */
#sawmill {
    top: 43.0%;
    left: 12.8%;
    width: 11.2%;
    z-index: 124;
}

#mine {
    top: 42.2%;
    left: 34.0%;
    width: 10.8%;
    z-index: 126;
}

#warehouse {
    top: 41.0%;
    left: 48.2%;
    width: 9.8%;
    z-index: 122;
}

/* Правый нижний сектор */
#wall {
    top: 55.6%;
    left: 60.0%;
    width: 14.4%;
    z-index: 132;
}

#expedition {
    top: 41.0%;
    left: 69.8%;
    width: 10.2%;
    z-index: 130;
}

#guardhouse {
    top: 39.0%;
    left: 82.2%;
    width: 9.4%;
    z-index: 128;
}

/* Площадки строительства ставим в центр будущих зданий */
#sawmillSite {
    top: 46.5%;
    left: 16.8%;
}

#quarrySite {
    top: 29.7%;
    left: 42.4%;
}

#mineSite {
    top: 45.7%;
    left: 37.7%;
}

#warehouseSite {
    top: 44.2%;
    left: 51.8%;
}

#marketSite {
    top: 28.5%;
    left: 55.4%;
}

#barracksSite {
    top: 28.3%;
    left: 70.1%;
}

#wallSite {
    top: 59.4%;
    left: 65.6%;
}

#expeditionSite {
    top: 44.5%;
    left: 73.4%;
}

#guardhouseSite {
    top: 42.4%;
    left: 85.3%;
}

/* Чуть меньше подписи, чтобы карта не была перегружена */
.building-label {
    top: -32px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.15;
}

/* =========================================================
   BUILDING LAYOUT FIX V2 — расстановка по красному скрину
   Этот блок должен быть в самом низу style.css, он перекрывает старые координаты.
========================================================= */

#townhall {
    top: 15.8% !important;
    left: 16.8% !important;
    width: 9.2% !important;
    z-index: 112 !important;
}

/* Рынок перенесён в верхнюю пустую площадку левее старого места */
#market {
    top: 22.8% !important;
    left: 30.5% !important;
    width: 10.4% !important;
    z-index: 120 !important;
}

/* Каменоломня остаётся в верхней центральной зоне, чуть правее рынка */
#quarry {
    top: 27.0% !important;
    left: 40.0% !important;
    width: 10.4% !important;
    z-index: 116 !important;
}

/* Казарма уводится из верхнего правого угла вниз/левее, как на красной разметке */
#barracks {
    top: 43.8% !important;
    left: 51.8% !important;
    width: 10.4% !important;
    z-index: 126 !important;
}

/* Лесопилка — в левую нижнюю площадку */
#sawmill {
    top: 48.5% !important;
    left: 10.8% !important;
    width: 11.2% !important;
    z-index: 124 !important;
}

/* Шахта — ниже и левее центра */
#mine {
    top: 49.0% !important;
    left: 30.8% !important;
    width: 10.8% !important;
    z-index: 125 !important;
}

/* Склад — в центральную площадку между шахтой и казармой */
#warehouse {
    top: 44.2% !important;
    left: 43.6% !important;
    width: 9.8% !important;
    z-index: 123 !important;
}

/* Стена — ниже, ближе к мосту */
#wall {
    top: 59.0% !important;
    left: 64.0% !important;
    width: 14.6% !important;
    z-index: 132 !important;
}

/* Экспедиции и сторожка остаются справа, но без наложений */
#expedition {
    top: 39.8% !important;
    left: 68.5% !important;
    width: 10.2% !important;
    z-index: 130 !important;
}

#guardhouse {
    top: 38.8% !important;
    left: 82.4% !important;
    width: 9.4% !important;
    z-index: 128 !important;
}

/* Площадки строительства под новые координаты */
#marketSite {
    top: 26.3% !important;
    left: 34.2% !important;
}

#quarrySite {
    top: 30.4% !important;
    left: 43.7% !important;
}

#barracksSite {
    top: 47.0% !important;
    left: 55.5% !important;
}

#sawmillSite {
    top: 52.0% !important;
    left: 15.0% !important;
}

#mineSite {
    top: 52.4% !important;
    left: 34.6% !important;
}

#warehouseSite {
    top: 47.6% !important;
    left: 47.0% !important;
}

#wallSite {
    top: 62.8% !important;
    left: 69.4% !important;
}

#expeditionSite {
    top: 43.4% !important;
    left: 72.0% !important;
}

#guardhouseSite {
    top: 42.3% !important;
    left: 85.6% !important;
}

/* FORGE V1 */
#blacksmith {
    top: 55.5%;
    left: 45.5%;
    width: 8.2%;
    z-index: 118;
}

#blacksmith img {
    width: 100%;
}

#blacksmithSite {
    top: 58.5%;
    left: 49.0%;
}

#blacksmith .building-label::before,
#blacksmithSite .build-site-label::before {
    content: "⚒ ";
}

.forge-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forge-modal {
    width: 760px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: rgba(14, 12, 9, 0.97);
    border: 1px solid #8b6b2a;
    border-radius: 14px;
    color: #f4ead0;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.85);
    padding: 16px;
}

.forge-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 220, 150, 0.2);
    margin-bottom: 14px;
}

.forge-modal-header h2 {
    margin: 0 0 10px 0;
}

.forge-modal-close {
    cursor: pointer;
    background: #3a2410;
    color: #fff;
    border: 1px solid #8b6b2a;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 18px;
}

.forge-summary,
.forge-active-queue,
.forge-research-card,
.forge-warning,
.forge-error {
    border: 1px solid rgba(255, 220, 150, 0.18);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0;
}

.forge-active-queue h3 {
    margin-top: 0;
}

.forge-idle {
    color: #b8dca8;
}

.forge-research-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.forge-research-title {
    color: #ffd77a;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
}

.forge-research-card button,
.forge-active-queue button {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #8b6b2a;
    background: #4b3314;
    color: #fff;
    cursor: pointer;
}

.forge-research-card button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.forge-reason {
    margin-top: 8px;
    color: #ff9a9a;
    font-size: 13px;
}

.forge-warning,
.forge-error {
    color: #ffb3b3;
}

@media (max-width: 760px) {
    .forge-research-grid {
        grid-template-columns: 1fr;
    }
}


/* storage_v2 */
.storage-warning {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 58px;
    max-width: 620px;
    padding: 7px 12px;
    border: 1px solid rgba(214, 163, 64, 0.9);
    border-radius: 10px;
    background: rgba(55, 34, 12, 0.92);
    color: #ffd88a;
    font-size: 13px;
    z-index: 30;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.resource-item.resource-warning {
    outline: 1px solid rgba(240, 176, 55, 0.9);
    box-shadow: 0 0 10px rgba(240, 176, 55, 0.45);
}

.resource-item.resource-full {
    outline: 1px solid rgba(220, 70, 70, 0.95);
    box-shadow: 0 0 12px rgba(220, 70, 70, 0.55);
}

.warehouse-details {
    margin: 12px 0;
}

.warehouse-details-card {
    border: 1px solid rgba(139, 106, 47, 0.85);
    border-radius: 10px;
    padding: 12px;
    background: rgba(18, 18, 18, 0.72);
}

.warehouse-details-card h3 {
    margin-top: 0;
}

.warehouse-resource-row {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}

.warehouse-resource-row.warehouse-resource-warning {
    border-color: rgba(240, 176, 55, 0.8);
}

.warehouse-resource-row.warehouse-resource-full {
    border-color: rgba(220, 70, 70, 0.9);
}

.warehouse-resource-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.warehouse-progress {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.45);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.warehouse-progress-fill {
    height: 100%;
    background: rgba(214, 163, 64, 0.95);
    border-radius: 999px;
}

.warehouse-note {
    color: #cdbb91;
    font-size: 13px;
    line-height: 1.35;
}

/* =======================
   ALLIANCES V1
======================= */
.alliance-modal-content {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 24px auto;
    background: rgba(17, 18, 22, 0.96);
    border: 1px solid rgba(190, 150, 75, 0.65);
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.75);
    padding: 18px;
    color: #f2e7cf;
}

.alliance-header,
.alliance-my-header,
.alliance-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.alliance-header h2,
.alliance-my-header h3,
.alliance-list-header h3 {
    margin: 0;
}

.alliance-header button,
.alliance-list-header button,
.alliance-main-button,
.alliance-list-row button,
.alliance-description-editor button {
    cursor: pointer;
    border: 1px solid rgba(210, 165, 75, 0.8);
    border-radius: 8px;
    background: linear-gradient(180deg, #5c3a16, #2d1b0a);
    color: #fff4db;
    padding: 8px 12px;
}

.alliance-danger-button {
    cursor: pointer;
    border: 1px solid rgba(205, 80, 70, 0.8);
    border-radius: 8px;
    background: linear-gradient(180deg, #6b1f1c, #35100e);
    color: #fff;
    padding: 7px 11px;
}

.alliance-help,
.alliance-empty,
.alliance-error {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #d8c7a3;
}

.alliance-error {
    border: 1px solid rgba(205, 80, 70, 0.7);
    color: #ffd1cc;
}

.alliance-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
}

.alliance-create-grid {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
}

.alliance-create-grid label,
.alliance-description-label,
.alliance-description-editor label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #d8c7a3;
}

.alliance-create-grid input,
.alliance-description-label textarea,
.alliance-description-editor textarea {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #fff4db;
    padding: 9px;
}

.alliance-description-label textarea,
.alliance-description-editor textarea {
    min-height: 76px;
    resize: vertical;
}

.alliance-main-button {
    margin-top: 10px;
}

.alliance-description-readonly,
.alliance-description-editor {
    margin: 12px 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    white-space: pre-wrap;
}

.alliance-description-editor button {
    margin-top: 8px;
}

.alliance-members-list,
.alliance-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alliance-member-row,
.alliance-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.alliance-list-row-mine {
    border-color: rgba(80, 190, 120, 0.65);
    background: rgba(60, 130, 75, 0.16);
}

.alliance-member-row small,
.alliance-list-row small {
    display: block;
    margin-top: 3px;
    color: #baa982;
}

.alliance-list-row p {
    margin: 6px 0 0;
    color: #d2c2a2;
    font-size: 13px;
}

.alliance-badge,
.ranking-alliance-tag {
    display: inline-block;
    border-radius: 999px;
    background: rgba(70, 120, 210, 0.22);
    border: 1px solid rgba(90, 155, 255, 0.45);
    color: #bcd6ff;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 700;
}

.ranking-profile-alliance {
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .alliance-create-grid,
    .alliance-member-row,
    .alliance-list-row,
    .alliance-my-header,
    .alliance-header,
    .alliance-list-header {
        display: block;
    }

    .alliance-member-row button,
    .alliance-list-row button,
    .alliance-my-header button,
    .alliance-header button,
    .alliance-list-header button {
        margin-top: 8px;
    }
}


/* =======================
   Admin Panel v2
======================= */
.admin-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    box-sizing: border-box;
}

.admin-panel-window {
    width: min(1240px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    background: #151515;
    border: 1px solid #8a6b2c;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 0 35px rgba(0,0,0,0.85);
    color: #eee;
}

.admin-panel-header,
.admin-detail-head,
.admin-key-row,
.admin-search-row,
.admin-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-panel-header {
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.admin-panel-header h2 { margin: 0; color: #f0c766; }
.admin-panel-subtitle, .admin-help, .muted { color: #aaa; font-size: 13px; }

.admin-panel-window button {
    background: #2f2414;
    color: #f4e1a0;
    border: 1px solid #7f642a;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

.admin-panel-window button:hover { background: #463316; }

.admin-panel-window input,
.admin-panel-window select,
.admin-panel-window textarea {
    background: #202020;
    color: #eee;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
}

.admin-panel-window textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    margin: 8px 0;
}

.admin-key-row input { flex: 1; }

.admin-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.admin-stat {
    background: #202020;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.admin-stat b { display: block; font-size: 24px; color: #f0c766; }
.admin-stat.danger b { color: #ff7777; }

.admin-panel-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 12px;
}

.admin-card {
    background: #1c1c1c;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.admin-card-title {
    font-weight: bold;
    color: #f0c766;
    margin-bottom: 10px;
}

.admin-players-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 560px;
    overflow-y: auto;
}

.admin-player-row {
    text-align: left;
    background: #242424 !important;
    color: #eee !important;
    border-color: #444 !important;
}

.admin-player-row.selected {
    outline: 2px solid #c99b35;
}

.admin-ban-label {
    color: #fff;
    background: #8b1a1a;
    border-radius: 5px;
    padding: 2px 6px;
    font-style: normal;
    font-size: 11px;
}

.admin-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.admin-input-grid,
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
}

.admin-input-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #bbb;
    font-size: 12px;
}

.admin-building-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-building-list span,
.admin-mission-row {
    background: #252525;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    padding: 7px 9px;
}

.admin-missions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px;
}

.admin-mission-row small {
    display: block;
    color: #aaa;
    margin-top: 3px;
}

.admin-error {
    color: #ffaaaa;
    background: #3a1818;
    border: 1px solid #733;
    padding: 10px;
    border-radius: 10px;
}

@media (max-width: 900px) {
    .admin-panel-grid,
    .admin-two-cols,
    .admin-overview {
        grid-template-columns: 1fr;
    }
}


/* Beta test prepare v1 */
.beta-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.beta-panel-window {
    width: min(1180px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: linear-gradient(180deg, #161616, #0f0f0f);
    border: 1px solid #7a5a20;
    border-radius: 14px;
    color: #eee;
    box-shadow: 0 0 40px rgba(0,0,0,0.9);
    padding: 18px;
}

.beta-panel-header,
.beta-key-row,
.beta-economy-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.beta-panel-header h2 { margin: 0; color: #f0c766; }
.beta-panel-subtitle { color: #aaa; font-size: 13px; margin-top: 4px; }

.beta-panel-window button {
    background: #2b2111;
    border: 1px solid #7a5a20;
    color: #f3dfaa;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.beta-panel-window button:hover { background: #463316; }
.beta-key-row { margin: 14px 0; justify-content: flex-start; flex-wrap: wrap; }
.beta-key-row input {
    min-width: 260px;
    background: #0b0b0b;
    border: 1px solid #555;
    color: #fff;
    border-radius: 8px;
    padding: 9px 10px;
}

.beta-ready {
    border: 1px solid #555;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.beta-ready.ready { border-color: #3e8b4c; background: rgba(46, 121, 63, 0.18); }
.beta-ready.not-ready { border-color: #b08a2d; background: rgba(160, 120, 35, 0.16); }
.beta-ready b { color: #f0c766; }
.beta-ready span { color: #bbb; }

.beta-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.beta-stat {
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.beta-stat.warn { border-color: #b08a2d; }
.beta-stat.danger { border-color: #a33; }
.beta-stat b { display: block; font-size: 24px; color: #f0c766; }
.beta-stat span { color: #aaa; font-size: 12px; }

.beta-economy-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #bbb;
    background: #161616;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}
.beta-economy-row b { color: #e8d29b; }

.beta-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.beta-check {
    border: 1px solid #333;
    border-radius: 10px;
    background: #181818;
    padding: 10px;
}
.beta-check.ok { border-color: #3e8b4c; }
.beta-check.warn { border-color: #b08a2d; }
.beta-check.bad, .beta-check.danger { border-color: #a33; }
.beta-check b { display: block; color: #f0c766; margin-bottom: 4px; }
.beta-check span { color: #bbb; font-size: 13px; }
.beta-error { color: #ffb2b2; border: 1px solid #a33; padding: 12px; border-radius: 10px; background: rgba(120, 30, 30, 0.25); }

.beta-checklist-box h3 { color: #f0c766; margin: 18px 0 10px; }
.beta-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}
.beta-checklist-card {
    background: #181818;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px;
}
.beta-checklist-card h4 { margin: 0 0 8px; color: #e8d29b; }
.beta-checklist-card label {
    display: block;
    color: #ddd;
    margin: 8px 0;
    font-size: 13px;
}


/* =======================
   BETA POLISH V2
======================= */
.beta-polish-status {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 12000;
    min-width: 170px;
    max-width: 320px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(190, 151, 66, 0.65);
    border-radius: 10px;
    background: rgba(15, 13, 8, 0.94);
    color: #f2dfaa;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.beta-polish-status-hidden {
    opacity: 0;
    transform: translateY(12px);
}

.beta-polish-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #b9923f;
    box-shadow: 0 0 8px rgba(185, 146, 63, 0.8);
    flex: 0 0 auto;
}

.beta-polish-status-loading .beta-polish-dot {
    animation: betaPolishPulse 0.8s infinite alternate;
}

.beta-polish-status-online .beta-polish-dot {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.8);
}

.beta-polish-status-warning .beta-polish-dot {
    background: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
}

.beta-polish-status-offline .beta-polish-dot {
    background: #f44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.8);
}

.polish-action-busy {
    opacity: 0.72 !important;
    filter: grayscale(0.15);
    cursor: wait !important;
}

@keyframes betaPolishPulse {
    from {
        transform: scale(0.85);
        opacity: 0.65;
    }
    to {
        transform: scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .beta-polish-status {
        right: 10px;
        bottom: 10px;
        min-width: 140px;
        font-size: 12px;
    }
}


/* =======================
   PERFORMANCE V1
======================= */
.performance-loading-box,
.performance-error-box {
    padding: 14px;
    border: 1px solid rgba(218, 174, 72, 0.45);
    border-radius: 10px;
    background: rgba(16, 13, 7, 0.78);
    color: #f3e2b7;
    line-height: 1.5;
}

.performance-error-box {
    border-color: rgba(220, 80, 80, 0.65);
    color: #ffd0d0;
}

.performance-error-box button {
    margin-top: 10px;
}

.performance-loading-light {
    opacity: 0.78;
}

.performance-card {
    contain: content;
}


/* =======================
   BUG REPORT V1
======================= */
.bug-report-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bug-report-window,
.bug-report-admin-window {
    width: 560px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: rgba(18, 17, 13, 0.98);
    border: 1px solid rgba(201, 157, 52, 0.55);
    border-radius: 12px;
    color: #f1e6c8;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.75);
    padding: 18px;
}

.bug-report-admin-window {
    width: 860px;
}

.bug-report-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.bug-report-header h2 {
    margin: 0 0 4px 0;
    color: #ffe27a;
}

.bug-report-header button,
.bug-report-actions button,
.bug-admin-toolbar button,
.bug-admin-actions button {
    cursor: pointer;
}

.bug-report-subtitle,
.bug-admin-meta,
.bug-admin-note,
.bug-report-status {
    color: #c7b98f;
    font-size: 14px;
}

.bug-report-window label {
    display: block;
    margin: 12px 0 5px;
    color: #f4d98b;
    font-weight: 700;
}

.bug-report-window input,
.bug-report-window select,
.bug-report-window textarea,
.bug-admin-toolbar select,
.bug-admin-detail textarea,
.bug-admin-actions select {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    color: #f4eddc;
    border: 1px solid #5c4b26;
    border-radius: 8px;
    padding: 9px 10px;
}

.bug-report-window textarea,
.bug-admin-detail textarea {
    resize: vertical;
}

.bug-report-actions,
.bug-admin-actions,
.bug-admin-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.bug-report-status {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.bug-report-status.success {
    color: #b8ff9b;
    border: 1px solid rgba(128, 220, 100, 0.45);
}

.bug-report-status.error {
    color: #ffb4a8;
    border: 1px solid rgba(220, 75, 60, 0.55);
}

.bug-admin-list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.bug-admin-item {
    border: 1px solid rgba(201, 157, 52, 0.28);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 10px;
    padding: 12px;
}

.bug-admin-item-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #fff0b2;
}

.bug-admin-detail {
    margin-top: 10px;
    padding: 10px;
    border-top: 1px solid rgba(201, 157, 52, 0.25);
}

.bug-admin-detail pre {
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    padding: 10px;
    color: #f4eddc;
}

.bug-status-open { border-color: rgba(255, 205, 70, 0.55); }
.bug-status-in_progress { border-color: rgba(120, 180, 255, 0.55); }
.bug-status-fixed { border-color: rgba(120, 230, 120, 0.55); }
.bug-status-critical { border-color: rgba(255, 90, 70, 0.7); }

/* =======================
   Final beta pack v1
   ======================= */
.help-window-backdrop,
.admin-monitoring-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.help-window,
.admin-monitoring-window {
    width: min(980px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: rgba(18, 18, 20, 0.97);
    color: #f2ead8;
    border: 1px solid rgba(201, 157, 52, 0.55);
    border-radius: 14px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.75);
    padding: 18px;
}

.help-window-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid rgba(201, 157, 52, 0.24);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.help-window-header h2 {
    margin: 0 0 4px 0;
    color: #ffe2a1;
}

.help-window-header button,
.admin-monitoring-window .admin-panel-header button {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(201, 157, 52, 0.5);
    background: rgba(80, 42, 18, 0.75);
    color: #fff3ce;
    cursor: pointer;
}

.help-window-subtitle {
    color: #cbbd9d;
    font-size: 13px;
}

.help-window-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.help-section {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(201, 157, 52, 0.22);
    border-radius: 12px;
    padding: 12px;
}

.help-section h3 {
    margin: 0 0 8px 0;
    color: #ffe0a0;
}

.help-section ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.45;
}

.help-section li {
    margin: 5px 0;
}

.admin-monitoring-content {
    margin-top: 14px;
}

.admin-monitoring-ready {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(201, 157, 52, 0.28);
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 12px;
}

.admin-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.monitor-row {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.admin-log-view {
    white-space: pre-wrap;
    max-height: 430px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.35);
    padding: 12px;
    border-radius: 10px;
    color: #d8f0d0;
    font-size: 12px;
    line-height: 1.35;
}

.monitor-table-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.monitor-table {
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
}

.monitor-table.ok {
    border-color: rgba(130, 220, 110, 0.45);
}

.monitor-table.bad {
    border-color: rgba(255, 95, 75, 0.65);
    color: #ffb0a0;
}


/* =======================
   RESPONSIVE UI V1
   Адаптация интерфейса под экран ноутбука
======================= */
:root {
    --eor-top-hud-height: 74px;
    --eor-bottom-hud-height: 106px;
}

.top-hud,
.bottom-hud,
.resource-bar,
.top-hud-actions,
.hud-actions,
.troops-bar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 106, 0.45) rgba(0, 0, 0, 0.25);
}

.top-hud::-webkit-scrollbar,
.bottom-hud::-webkit-scrollbar,
.resource-bar::-webkit-scrollbar,
.top-hud-actions::-webkit-scrollbar,
.hud-actions::-webkit-scrollbar,
.troops-bar::-webkit-scrollbar {
    height: 6px;
}

.top-hud::-webkit-scrollbar-thumb,
.bottom-hud::-webkit-scrollbar-thumb,
.resource-bar::-webkit-scrollbar-thumb,
.top-hud-actions::-webkit-scrollbar-thumb,
.hud-actions::-webkit-scrollbar-thumb,
.troops-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 106, 0.45);
    border-radius: 999px;
}

@media (max-width: 1600px), (max-height: 860px) {
    :root {
        --eor-top-hud-height: 64px;
        --eor-bottom-hud-height: 90px;
    }

    .layout {
        padding-top: var(--eor-top-hud-height) !important;
        padding-bottom: var(--eor-bottom-hud-height) !important;
    }

    .top-hud {
        height: var(--eor-top-hud-height) !important;
        grid-template-columns: 185px minmax(330px, 1fr) minmax(390px, auto) 76px !important;
        gap: 8px !important;
        padding: 6px 8px !important;
        overflow: hidden;
    }

    .game-logo {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px !important;
        letter-spacing: 0.8px !important;
    }

    .resource-bar {
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    .resource-item {
        min-width: 132px !important;
        height: 44px !important;
        padding: 0 9px !important;
        flex: 0 0 auto;
    }

    .resource-value {
        font-size: 15px !important;
    }

    .hud-icon,
    .hud-action-icon {
        width: 25px !important;
        height: 25px !important;
        font-size: 20px !important;
    }

    .top-hud-actions {
        justify-content: flex-start !important;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    .top-hud-button {
        min-width: 82px !important;
        height: 42px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        font-size: 13px !important;
        flex: 0 0 auto;
    }

    .top-hud-button-icon {
        width: 21px !important;
        height: 21px !important;
        font-size: 18px !important;
    }

    .logout-button {
        height: 42px !important;
        width: 72px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .city-panel {
        min-height: calc(100vh - var(--eor-top-hud-height) - var(--eor-bottom-hud-height)) !important;
    }

    #city-map {
        height: calc(100vh - var(--eor-top-hud-height) - var(--eor-bottom-hud-height)) !important;
    }

    .bottom-hud {
        bottom: 6px !important;
        width: min(1120px, calc(100vw - 14px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 14px) !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start !important;
    }

    .hud-actions,
    .troops-bar {
        gap: 8px !important;
        flex: 0 0 auto;
    }

    .hud-actions {
        padding-right: 10px !important;
    }

    .hud-action-button {
        width: 78px !important;
        height: 58px !important;
        font-size: 12px !important;
        gap: 2px !important;
        flex: 0 0 auto;
    }

    .troop-item {
        min-width: 118px !important;
        height: 58px !important;
        grid-template-columns: 30px 1fr !important;
        padding: 8px 9px !important;
        font-size: 12px !important;
        flex: 0 0 auto;
    }

    .troop-count {
        font-size: 19px !important;
    }

    .building-label {
        font-size: 12px !important;
        padding: 5px 8px !important;
        min-width: 70px !important;
    }

    .building-timer {
        font-size: 12px !important;
        padding: 5px 8px !important;
    }
}

@media (max-width: 1366px), (max-height: 760px) {
    :root {
        --eor-top-hud-height: 58px;
        --eor-bottom-hud-height: 78px;
    }

    .top-hud {
        grid-template-columns: 150px minmax(255px, 1fr) minmax(300px, 1fr) 64px !important;
        gap: 6px !important;
        padding: 5px 6px !important;
    }

    .game-logo {
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
    }

    .resource-item {
        min-width: 116px !important;
        height: 38px !important;
        border-radius: 8px !important;
    }

    .resource-value {
        font-size: 13px !important;
    }

    .top-hud-button {
        min-width: 66px !important;
        height: 38px !important;
        padding: 0 7px !important;
        font-size: 12px !important;
    }

    .logout-button {
        width: 58px !important;
        height: 38px !important;
        font-size: 12px !important;
    }

    .bottom-hud {
        left: 6px !important;
        right: 6px !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 12px 12px 0 0 !important;
        padding: 7px 8px !important;
        gap: 8px !important;
    }

    .hud-action-button {
        width: 68px !important;
        height: 52px !important;
        font-size: 11px !important;
    }

    .troop-item {
        min-width: 104px !important;
        height: 52px !important;
        grid-template-columns: 26px 1fr !important;
        padding: 7px 8px !important;
    }

    .troop-count {
        font-size: 17px !important;
    }

    .building-label {
        opacity: 0.22;
        font-size: 11px !important;
    }

    .building:hover .building-label {
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .top-hud {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: 148px;
        overflow-y: auto;
        align-items: stretch !important;
    }

    .layout {
        padding-top: 148px !important;
        padding-bottom: 82px !important;
    }

    .game-logo {
        text-align: center;
    }

    .resource-bar,
    .top-hud-actions {
        width: 100%;
        justify-content: flex-start !important;
    }

    .logout-button {
        width: 100% !important;
    }

    .city-panel {
        min-height: calc(100vh - 230px) !important;
    }

    #city-map {
        height: calc(100vh - 230px) !important;
    }
}

/* Ручной компактный режим, включается responsive_ui.js при маленьком экране */
body.eor-compact-ui .top-hud-button span:last-child,
body.eor-compact-ui .hud-action-button span:last-child {
    font-size: 11px;
}

body.eor-compact-ui .storage-warning {
    max-width: min(520px, calc(100vw - 24px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
}

body.eor-compact-ui .modal,
body.eor-compact-ui .market-modal-backdrop,
body.eor-compact-ui .forge-modal-backdrop {
    padding: 10px;
    box-sizing: border-box;
}

body.eor-compact-ui .army-modal-content,
body.eor-compact-ui .market-modal,
body.eor-compact-ui .forge-modal,
body.eor-compact-ui .settings-modal,
body.eor-compact-ui .ranking-modal-content,
body.eor-compact-ui .admin-panel-modal,
body.eor-compact-ui .help-modal-content,
body.eor-compact-ui .bug-report-modal-content {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
}

/* =======================
   WORLD MAP LAYOUT V3
   Большое открытое королевство, без правой инфо-панели,
   стрелки снизу слева, компактная карта 50x20 снизу.
======================= */
.world-screen {
    height: 100vh !important;
    overflow: hidden !important;
}

.world-topbar {
    height: 70px !important;
    min-height: 70px !important;
    padding: 8px 18px !important;
}

.world-filter-panel {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
}

.world-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 12px 18px 8px 18px !important;
    box-sizing: border-box !important;
}

.world-info-panel {
    display: none !important;
}

.world-nav-panel {
    align-self: end !important;
    justify-self: center !important;
    width: 64px !important;
    min-height: 210px !important;
    margin-bottom: 8px !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    background: rgba(12, 8, 4, 0.64) !important;
}

.world-nav-panel button {
    min-width: 48px !important;
    width: 48px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 18px !important;
}

.world-nav-panel div {
    gap: 8px !important;
    transform: translateX(-7px);
}

.world-viewport {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

.world-kingdom-header {
    margin: 12px 20px 8px 20px !important;
    padding: 10px 14px !important;
}

.world-kingdom-header h2 {
    font-size: 24px !important;
}

.world-kingdom-slots-grid {
    grid-template-columns: repeat(6, minmax(135px, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(112px, 1fr)) !important;
    gap: 16px !important;
    padding: 12px 20px 22px 20px !important;
    min-height: calc(100% - 78px) !important;
}

.world-kingdom-slot {
    min-height: 112px !important;
    border-radius: 13px !important;
}

.world-kingdom-slot-number {
    min-width: 25px !important;
    height: 25px !important;
    line-height: 25px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
}

.world-kingdom-slot-icon {
    font-size: 42px !important;
    line-height: 46px !important;
}

.world-kingdom-slot-address {
    font-size: 13px !important;
}

.world-bottom-panel {
    flex: 0 0 270px !important;
    padding: 8px 18px 12px 18px !important;
    overflow: hidden !important;
}

.world-minimap-header {
    margin-bottom: 7px !important;
}

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

.world-minimap {
    grid-template-columns: repeat(50, 15px) !important;
    grid-template-rows: repeat(20, 15px) !important;
    gap: 2px !important;
    max-height: 225px !important;
    padding: 6px !important;
    margin: 0 auto !important;
}

.world-mini-cell {
    width: 15px !important;
    height: 15px !important;
    font-size: 9px !important;
}

@media (max-width: 1400px) {
    .world-main {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .world-kingdom-slots-grid {
        grid-template-columns: repeat(6, minmax(115px, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(96px, 1fr)) !important;
        gap: 12px !important;
    }

    .world-kingdom-slot {
        min-height: 96px !important;
    }

    .world-bottom-panel {
        flex-basis: 245px !important;
    }

    .world-minimap {
        grid-template-columns: repeat(50, 13px) !important;
        grid-template-rows: repeat(20, 13px) !important;
        max-height: 205px !important;
    }

    .world-mini-cell {
        width: 13px !important;
        height: 13px !important;
    }
}

@media (max-width: 1000px) {
    .world-topbar {
        height: auto !important;
        min-height: 64px !important;
        flex-wrap: wrap !important;
    }

    .world-main {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        padding: 8px !important;
    }

    .world-nav-panel {
        width: 54px !important;
        min-height: 180px !important;
    }

    .world-nav-panel button {
        min-width: 40px !important;
        width: 40px !important;
        height: 38px !important;
    }

    .world-kingdom-slots-grid {
        grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
        grid-template-rows: repeat(6, minmax(78px, 1fr)) !important;
        gap: 10px !important;
        padding: 8px 12px 14px 12px !important;
    }

    .world-bottom-panel {
        flex-basis: 205px !important;
    }

    .world-minimap {
        grid-template-columns: repeat(50, 10px) !important;
        grid-template-rows: repeat(20, 10px) !important;
        max-height: 170px !important;
    }

    .world-mini-cell {
        width: 10px !important;
        height: 10px !important;
    }
}

/* cavalry_monks_full_v2: costs and missing resources */
.cost-missing {
    color: #ff5959 !important;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.45);
}
.unit-cost-box {
    margin: 8px 0 6px;
    padding: 7px 8px;
    border: 1px solid rgba(218, 178, 55, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 13px;
    line-height: 1.35;
}
.unit-cost-line + .unit-cost-line {
    margin-top: 3px;
}
/* Доступные скринридеру подписи для компактных форм. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}