/* Stronghold: Definitive Edition Authentic Medieval UI & Main Menu */

/* Fonts shipped with Stronghold DE. Junicode has no Cyrillic, so Russian letters fall back to
   Noto Serif exactly like the game's Noesis font fallback does. */
@font-face { font-family: 'SHJunicode'; src: url('../assets/fonts/JunicodeTwoBeta-Medium.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'SHNotoSerif'; src: url('../assets/fonts/NotoSerif-Regular.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'SHPTRoot'; src: url('../assets/fonts/PTRootUI-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SHPTRoot'; src: url('../assets/fonts/PTRootUI-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
:root { --sh-font: 'SHJunicode', 'SHNotoSerif', serif; }

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #121110;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    color: #e5ded2;
}

#game-canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    cursor: default;
}

@supports (height: 100dvh) {
    #game-canvas { height: 100dvh; }
}

/* ============================================================ */
/* FULLSCREEN MAIN MENU SCREEN                                   */
/* ============================================================ */
#main-menu-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.menu-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/images/ui/Splash_web.jpg') no-repeat center center;
    background-size: cover;
    transform: scale(1.05);
    animation: menuSlowPan 25s infinite alternate ease-in-out;
}

@keyframes menuSlowPan {
    0% { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.12) translate(-15px, -10px); }
}

.menu-vignette {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(10, 8, 7, 0.25) 0%, rgba(5, 4, 3, 0.85) 80%, #000 100%);
    pointer-events: none;
}

.menu-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 680px;
    padding: 30px;
    text-align: center;
}

.menu-logo-wrapper {
    margin-bottom: 25px;
}

.menu-main-logo {
    width: 440px;
    max-width: 90vw;
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
    animation: logoShimmer 4s infinite ease-in-out;
}

@keyframes logoShimmer {
    0%, 100% { filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 15px rgba(212, 175, 55, 0.3)); }
    50% { filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 28px rgba(241, 196, 15, 0.6)); }
}

.menu-sub-title {
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 19px;
    color: #f1c40f;
    letter-spacing: 2px;
    margin-top: 8px;
    text-shadow: 2px 2px 4px #000;
}

.menu-tagline {
    font-size: 13px;
    color: #cfc2ad;
    margin-top: 4px;
    text-shadow: 1px 1px 2px #000;
}

.menu-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 420px;
    max-width: 90vw;
}

.menu-btn {
    background: linear-gradient(180deg, #3d3224 0%, #1e1913 100%);
    border: 2px solid #78613c;
    border-radius: 6px;
    padding: 12px 18px;
    color: #ebdcd9;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    transition: all 0.22s ease-in-out;
    text-shadow: 1px 1px 3px #000;
}

.menu-btn:hover {
    background: linear-gradient(180deg, #5c472c 0%, #2b2014 100%);
    border-color: #f1c40f;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 12px rgba(241, 196, 15, 0.45);
}

.menu-btn-primary {
    background: linear-gradient(180deg, #6e4e24 0%, #35230e 100%);
    border-color: #d4af37;
    font-weight: bold;
    color: #fff4d4;
}

.menu-btn-icon {
    font-size: 20px;
}

.menu-footer {
    margin-top: 25px;
    font-size: 11px;
    color: #8c7e6c;
    text-shadow: 1px 1px 2px #000;
}

/* ============================================================ */
/* TOP STATUS BAR                                               */
/* ============================================================ */
#top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(32, 29, 24, 0.95) 0%, rgba(18, 16, 13, 0.95) 100%);
    border-bottom: 2px solid #5a4b32;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.top-bar-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kingdom-badge {
    background: #1b1915;
    border: 1px solid #7a633a;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 13px;
    color: #d4af37;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #3d372c;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 13px;
}

.hud-icon {
    font-size: 15px;
}

.season-badge {
    background: #2b2519;
    border: 1px solid #b8860b;
    color: #f1c40f;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.threat-badge {
    background: #381a17;
    border: 1px solid #e74c3c;
    color: #ff7675;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    animation: threatPulse 2s infinite ease-in-out;
}

@keyframes threatPulse {
    0%, 100% { opacity: 1.0; }
    50% { opacity: 0.75; }
}

/* BUTTONS */
.gold-btn {
    background: linear-gradient(180deg, #7a5c2d 0%, #3d2c12 100%);
    border: 1px solid #d4af37;
    color: #fff4d4;
    padding: 6px 14px;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.2s;
}

.gold-btn:hover {
    background: linear-gradient(180deg, #966f33 0%, #4f3915 100%);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.gold-btn.disabled, .gold-btn:disabled {
    background: #2b2720;
    border-color: #554f43;
    color: #736c5e;
    cursor: not-allowed;
    box-shadow: none;
}

/* NOTIFICATION TICKER */
#notification-ticker {
    position: absolute;
    top: 60px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9;
    pointer-events: none;
    max-width: 480px;
}

.notif-item {
    background: rgba(22, 19, 15, 0.94);
    border: 1px solid #4a3e2a;
    border-left: 5px solid #d4af37;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 13px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
    transition: opacity 0.5s ease;
}

/* ENEMY LORD DIALOGUE BANNER */
#lord-dialogue-modal {
    position: absolute;
    top: 70px;
    right: 20px;
    background: linear-gradient(135deg, #2b1411 0%, #150a09 100%);
    border: 2px solid #c0392b;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.85);
    z-index: 15;
    animation: slideInRight 0.4s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.lord-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.6);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lord-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lord-details h4 {
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    color: #ff7675;
    margin-bottom: 4px;
}

.lord-details p {
    font-style: italic;
    font-size: 13px;
    color: #ebdcd9;
}

/* ============================================================ */
/* BOTTOM STONE CONSOLE (Definitive Edition Shield & Dock)      */
/* ============================================================ */
#bottom-dock {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 920px;
    max-width: 98vw;
    background: linear-gradient(180deg, #28241d 0%, #171512 100%);
    border-top: 3px solid #78613c;
    border-left: 3px solid #5a492d;
    border-right: 3px solid #5a492d;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.9);
    z-index: 10;
}

.dock-tabs {
    display: flex;
    background: #191612;
    border-bottom: 2px solid #453925;
}

.dock-tab {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: #a89a80;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-right: 1px solid #2d261b;
}

.dock-tab:last-child {
    border-right: none;
}

.dock-tab:hover {
    background: rgba(135, 105, 57, 0.2);
    color: #e5ded2;
}

.dock-tab.active {
    background: #28241d;
    color: #f1c40f;
    font-weight: bold;
    border-bottom: 2px solid #f1c40f;
}

.dock-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    min-height: 90px;
}

.dock-content {
    flex: 1;
    overflow-x: auto;
}

.dock-panel {
    display: flex;
    gap: 10px;
}

.build-card {
    background: #1e1b16;
    border: 1px solid #473924;
    border-radius: 4px;
    padding: 5px 8px;
    min-width: 95px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
}

.build-sprite-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: transform 0.2s ease;
}

.build-card:hover .build-sprite-thumb {
    transform: scale(1.15);
}

.build-card:hover {
    background: #332b1f;
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.build-name {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #e5ded2;
}

.build-cost {
    font-size: 9px;
    color: #bfa882;
}

/* SCRIBE PODIUM (Right Box) */
.scribe-podium {
    display: flex;
    gap: 10px;
    padding-left: 12px;
    border-left: 2px solid #4a3e2a;
}

.podium-stat-box {
    background: #191612;
    border: 1px solid #5a492d;
    border-radius: 4px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.podium-stat-box:hover {
    border-color: #d4af37;
    background: #252018;
}

.podium-face {
    font-size: 26px;
}

.podium-icon {
    font-size: 20px;
}

.podium-text {
    display: flex;
    flex-direction: column;
}

.podium-title {
    font-size: 10px;
    color: #a89a80;
}

.podium-val {
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    font-size: 13px;
    color: #f1c40f;
    font-weight: bold;
}

/* ============================================================ */
/* MODALS                                                       */
/* ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal-box {
    background: linear-gradient(180deg, #2b251d 0%, #161410 100%);
    border: 2px solid #78613c;
    border-radius: 8px;
    width: 540px;
    max-width: 92vw;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.95);
    padding: 20px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #4a3e2a;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.modal-header h3 {
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
    color: #d4af37;
    font-size: 18px;
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: #a89a80;
    font-size: 20px;
    cursor: pointer;
}

.btn-close-modal:hover {
    color: #e74c3c;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px dashed #3a3224;
}

.styled-select {
    background: #171512;
    border: 1px solid #5a4b32;
    color: #f1c40f;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: 'SHJunicode', 'SHNotoSerif', serif;
}

/* MARKET GOODS ROWS */
.market-item-row {
    background: #1d1a15;
    border: 1px solid #3d3424;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.market-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.market-item-icon {
    font-size: 20px;
}

.market-item-actions {
    display: flex;
    gap: 6px;
}

.barracks-list, .tech-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.barracks-item, .tech-item {
    background: #1f1b15;
    border: 1px solid #3d3322;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hidden {
    display: none !important;
}

/* Compact touch layout for phones and narrow browser windows. */
@media (max-width: 760px) {
    #top-bar {
        height: auto;
        min-height: 94px;
        padding: 5px 7px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 7px;
    }

    .top-bar-section {
        min-width: 0;
        gap: 5px;
    }

    .top-bar-section:first-child {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .top-bar-section:nth-child(2) {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .top-bar-section:last-child {
        flex: 1 1 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .top-bar-section:last-child::-webkit-scrollbar,
    .dock-tabs::-webkit-scrollbar,
    .dock-content::-webkit-scrollbar {
        display: none;
    }

    .kingdom-badge {
        padding: 3px 7px;
        font-size: 11px;
        max-width: 62vw;
    }

    #btn-switch-kingdom {
        flex: 0 0 auto;
        padding: 5px 8px;
        font-size: 10px;
    }

    .hud-stat {
        gap: 3px;
        padding: 2px 5px;
        font-size: 11px;
    }

    .hud-icon { font-size: 13px; }
    .season-badge, .threat-badge { flex: 0 0 auto; font-size: 10px; padding: 3px 6px; }
    #btn-music-toggle, #btn-audio-toggle, #btn-save-load { flex: 0 0 auto; padding: 5px 7px; font-size: 10px; }
    #network-status { flex: 0 0 auto; font-size: 10px !important; }

    #bottom-dock {
        left: 0;
        width: 100%;
        max-width: none;
        max-height: 36vh;
        transform: none;
        border-left: 0;
        border-right: 0;
        border-top-width: 2px;
        border-radius: 8px 8px 0 0;
    }

    .dock-tabs {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dock-tab {
        flex: 0 0 76px;
        min-height: 48px;
        padding: 5px 3px;
        font-size: 9px;
        line-height: 1.2;
    }

    .dock-main-row {
        min-height: 0;
        padding: 5px 7px max(5px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        overflow: hidden;
    }

    .dock-content {
        width: 100%;
        min-height: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dock-panel { min-height: 66px; gap: 6px; }
    .build-card { flex: 0 0 76px; min-width: 76px; padding: 4px; }
    .build-sprite-thumb { width: 28px; height: 28px; }
    .build-name { font-size: 9px; }
    .build-cost { font-size: 8px; }

    .scribe-podium {
        width: 100%;
        padding: 4px 0 0;
        border-left: 0;
        border-top: 1px solid #4a3e2a;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .podium-stat-box { min-width: 0; padding: 3px 4px; gap: 4px; }
    .podium-face { font-size: 18px; }
    .podium-icon { font-size: 15px; }
    .podium-title { font-size: 8px; white-space: nowrap; }
    .podium-val { font-size: 10px; white-space: nowrap; }

    #minimap-label { left: 7px !important; bottom: calc(36vh + 5px) !important; font-size: 9px !important; }
    #notification-ticker { top: 104px; left: 7px; right: 7px; max-width: none; gap: 4px; }
    .notif-item { padding: 6px 8px; font-size: 11px; }
    #lord-dialogue-modal { top: 105px; left: 7px; right: 7px; max-width: none; padding: 7px 9px; gap: 8px; }
    .lord-avatar { width: 42px; height: 42px; }
    .lord-details p { font-size: 11px; }

    .modal-box {
        width: calc(100vw - 16px) !important;
        max-width: 620px;
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
        padding: 14px;
    }

    .market-item-row { gap: 6px; padding: 6px; }
    .market-item-actions { flex-direction: column; gap: 4px; }
    .market-item-actions .gold-btn { padding: 5px 7px; font-size: 10px; }
}

@media (max-width: 380px) {
    #top-bar { min-height: 106px; }
    .kingdom-badge { max-width: 55vw; font-size: 10px; }
    .top-bar-section:last-child { gap: 4px; }
    .top-bar-section:last-child .season-badge { max-width: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .top-bar-section:last-child .threat-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #network-status { display: none; }
    .dock-tab { flex-basis: 70px; }
    .podium-title { font-size: 7px; }
    .podium-val { font-size: 9px; }
}
.granary-food-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.granary-food-row { display:flex; align-items:center; justify-content:space-between; gap:5px; min-width:0; font-size:12px; color:#e4d7b8; }
.granary-food-row span { white-space:nowrap; }
.food-consumption-toggle { border:1px solid #78904d; border-radius:3px; background:#314323; color:#d8e7b5; padding:3px 6px; font:inherit; font-size:10px; cursor:pointer; }
.food-consumption-toggle.is-disabled { border-color:#765044; background:#402b25; color:#d6a99b; }
.food-consumption-toggle:focus-visible { outline:2px solid #f1c75b; outline-offset:2px; }
.siege-yard-heading { margin:14px 0 7px; padding-top:9px; border-top:1px solid #59492f; color:#d6ae59; font-family:'SHJunicode', 'SHNotoSerif', serif; }
.siege-ammo-row, .siege-crew-row { margin:6px 0; }
.siege-ammo-row .gold-btn, .siege-crew-row .gold-btn { white-space:nowrap; }

.siege-camp-status { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 4px; background: rgba(32, 26, 18, 0.8); color: #e0c991; font-size: 13px; }
.siege-camp-progress { height: 9px; margin: -5px 0 14px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.38); border-radius: 5px; background: #17130f; }
.siege-camp-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9d6c20, #e6c766); box-shadow: 0 0 8px rgba(230, 199, 102, 0.35); transition: width 240ms ease-out; }

/* Kingdoms of the realm (conquest mode) */
.kingdoms-list { display: flex; flex-direction: column; gap: 8px; }
.kingdom-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(30, 24, 16, 0.85); border: 1px solid #5c4a2e; border-left: 6px solid #cfae69; border-radius: 6px; }
.kingdom-portrait { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; overflow: hidden; background: #1a140d; display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid #78613c; }
.kingdom-portrait img { width: 100%; height: 100%; object-fit: cover; }
.kingdom-info { flex: 1; min-width: 0; }
.kingdom-info b { color: #f0d29a; }
.kingdoms-chronicle { margin: 0; padding-left: 18px; font-size: 12px; color: #d9c7a0; line-height: 1.5; }
@media (max-width: 640px) { .kingdom-row { flex-wrap: wrap; } }

/* ===== Original Stronghold DE bottom panel (js/hud.js) ===== */
#original-hud { position: fixed; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
.ohud-panel { position: absolute; left: 0; top: 0; width: 914px; height: 166px; transform-origin: 0 0; user-select: none; }
.ohud-panel img { pointer-events: auto; image-rendering: auto; }
.ohud-panel .ohud-frame { pointer-events: auto; }
.ohud-menu { pointer-events: none; }
.ohud-build { cursor: pointer; transition: filter .08s; }
/* Menu switch of the original: old icons fade off the parchment, the new row fades in. */
.ohud-build.ohud-fade-out { opacity: 0; transition: opacity .1s linear, filter .08s; }
.ohud-build.ohud-fade-in { animation: ohudFadeIn .32s ease-out; }
@keyframes ohudFadeIn { from { opacity: 0; } }
.ohud-build.locked { opacity: .45; filter: grayscale(.7); cursor: default; }
.ohud-build.unaffordable { filter: brightness(.72) saturate(.7); }
.ohud-build.active { filter: drop-shadow(0 0 3px #fff3b0) brightness(1.15); }
.ohud-tab, .ohud-side { cursor: pointer; }
.ohud-radar { pointer-events: auto; cursor: pointer; background: #1d2a17; }
.ohud-book { pointer-events: auto; cursor: pointer; }
.ohud-pop { font: bold 17px 'SHJunicode', 'SHNotoSerif', serif; width: 40px; text-align: center; pointer-events: none; text-shadow: 0 0 2px #f6e7c0; }
.ohud-gold, .ohud-people { font: bold 13.5px SHJunicode, SHNotoSerif, serif; color: #3a2a12; width: 62px; text-align: center; pointer-events: none; text-shadow: 0 0 2px #f6e7c0; }
.ohud-date { font: 13px SHJunicode, SHNotoSerif, serif; color: #f6ebcd; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; white-space: nowrap; letter-spacing: .5px; }
/* Big building tooltip of the original: dark card above the panel with price, description and goods. */
.ohud-tip-big { position: absolute; bottom: 170px; max-width: 300px; padding: 5px 9px 6px; color: #f6ead0;
    background: rgba(30, 25, 16, 0.9); border: 1px solid rgba(196, 166, 106, 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    font-family: var(--sh-font); font-size: 13px; line-height: 1.3; pointer-events: none; white-space: normal; }
.ohud-tip-big.hidden { display: none; }
.ohud-tip-big .tip-title { font-weight: 700; font-size: 14px; color: #fff5dd; white-space: nowrap; }
.ohud-tip-big .tip-title .goods-icon { height: 14px; margin: 0 1px; vertical-align: -2px; }
.ohud-tip-big .tip-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.ohud-tip-big .tip-label { color: #cbb487; flex: 0 0 auto; }
.ohud-tip-big .tip-text { color: #efe0c2; }
.ohud-tip-big .goods-icon { height: 14px; margin-right: 1px; vertical-align: -2px; }
.ohud-pop-arrow { pointer-events: none; }
.ohud-speed { pointer-events: auto; cursor: pointer; padding: 0; border: 1px solid #6b5327; border-radius: 2px;
    background: linear-gradient(#4a3a1e, #241c10); color: #f4e3b8; font: bold 12px/1 var(--sh-font); text-align: center; }
.ohud-speed:hover { background: linear-gradient(#6a5330, #33270f); color: #fff3cf; }
.ohud-speed-label { font: 8px var(--sh-font); color: #f1e2bd; text-align: right; width: 46px; pointer-events: none;
    text-shadow: 0 1px 1px #000; }
.ohud-speed-label.hidden { display: none; }
/* The two quick buttons in the original's bottom-left corner. */
.ohud-corner { position: fixed; left: 2px; bottom: 2px; z-index: 21; display: flex; flex-direction: column; gap: 3px; }
.ohud-corner-btn { position: relative; display: flex; align-items: center; justify-content: center; padding: 2px; cursor: pointer;
    border: 1px solid #7c6234; border-radius: 3px; background: radial-gradient(circle at 50% 30%, #56431f, #211a10); }
.ohud-corner-btn img { width: 100%; height: 100%; object-fit: contain; }
.ohud-corner-btn:hover { filter: brightness(1.2); border-color: #c8a45c; }
.ohud-corner-btn:active { transform: translateY(1px); }
.ohud-tip { position: absolute; left: 130px; top: 2px; padding: 1px 6px; font: 9px SHJunicode, SHNotoSerif, serif; color: #f6ead0; background: rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; }
.ohud-tip.hidden { display: none; }
body.original-hud-active #top-bar,
body.original-hud-active #bottom-dock,
body.original-hud-active #minimap-label { display: none !important; }

.ohud-panel .ohud-frame { pointer-events: none !important; }
.ohud-menu img { pointer-events: auto; }

/* ===== Original Stronghold DE main menu (FrontendMenus.xaml) ===== */
#main-menu-screen.ofront { position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; }
#main-menu-screen.ofront.hidden { display: none; }
.ofront-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ofront-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; }
.ofront-logo { position: absolute; left: 0; top: 0; width: 604px; height: 202px; }
.ofront-column { position: absolute; left: 1032px; top: 0; width: 618px; height: 1080px; }
.ofront-btn { position: absolute; left: 50%; width: 632px; height: 173px; margin-left: -316px; padding: 0; border: 0; background: none; cursor: pointer; }
.ofront-btn.small { left: auto; margin-left: 0; width: 380px; height: 103px; }
.ofront-btn .bar { position: absolute; inset: 0; width: 100%; height: 100%; }
.ofront-btn .bar.hover { opacity: 0; transition: opacity .12s; }
.ofront-btn:hover .bar.hover { opacity: 1; }
.ofront-btn .shield { position: absolute; left: 4.5%; top: 11%; height: 78%; }
.ofront-btn span { position: absolute; left: 22%; right: 6%; top: 9.25%; bottom: 35.3%; display: flex; align-items: center; justify-content: center;
    font: 600 46px 'SHJunicode', 'SHNotoSerif', serif; color: #f3e1b5; text-shadow: 0 2px 4px #000, 0 0 10px #000; }
.ofront-btn.small span { font-size: 30px; }
.ofront-version { position: absolute; left: 4px; bottom: 4px; font: 16px SHJunicode, SHNotoSerif, serif; color: #cdb98d; text-shadow: 0 1px 2px #000; }

/* ===== Original building windows (HUD_Buildings.xaml via js/xaml.js + js/panels.js) ===== */
button, input, select, textarea { font-family: inherit; }
.ohud-buildings { pointer-events: none; }
.ohud-buildings .opanel { pointer-events: auto; }
.ohud-buildings img { pointer-events: none; }
.ohud-buildings .xg, .ohud-buildings .xt, .ohud-buildings .xb, .ohud-buildings .xpop { box-sizing: border-box; }
.ohud-buildings .xt { font-family: var(--sh-font); line-height: 1.12; letter-spacing: 0; pointer-events: none;
    -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.ohud-buildings .xt.shadow { color: #fff !important; text-shadow: 1px 1px 1px #000, 0 0 2px #000; }
.ohud-buildings .xb { cursor: pointer; pointer-events: auto; }
.ohud-buildings .xb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.ohud-buildings .xb .xbt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    font: 500 15px var(--sh-font); color: #000; line-height: 1; pointer-events: none; }
.ohud-buildings .xb:active > img { transform: translate(1px, 1px); }
.ohud-buildings .xpop { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding-right: 4px; pointer-events: none; }
.ohud-buildings .xpop .xt { font-size: 20px; font-weight: 700; }
.ohud-buildings .xpop img { width: 22px; height: 22px; }
.ohud-buildings .ostatus { position: absolute; left: 230px; top: 92px; font-size: 18px; color: #3b2a12; }

/* Roll-over line and notices use the game's lettering */
.ohud-pop, .ohud-gold, .ohud-people, .ohud-date, .ohud-tip { font-family: var(--sh-font) !important; }

/* ===== Remaining pop-up windows dressed in the game's own parchment, wood and buttons ===== */
.modal-overlay { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: none !important; }
.modal-box {
    background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / cover !important;
    color: #1d140a !important;
    border: 6px solid #4a2f17 !important; border-radius: 2px !important;
    outline: 2px solid #b48a4c; outline-offset: -10px;
    box-shadow: 0 0 0 2px #1b1109, 0 10px 34px rgba(0, 0, 0, 0.85) !important;
    font-family: var(--sh-font) !important;
}
.modal-box * { font-family: var(--sh-font) !important; }
.modal-box .modal-header { background: none !important; border-bottom: 1px solid rgba(74, 47, 23, 0.45) !important; }
.modal-box h3, .modal-box h4 { color: #3a1d08 !important; text-shadow: none !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.modal-box p, .modal-box li, .modal-box label, .modal-box span, .modal-box div, .modal-box b, .modal-box td, .modal-box th { color: inherit; }
.modal-box .unit-cost, .modal-box .kingdoms-chronicle, .modal-box small { color: #3b2a16 !important; }
.modal-box .barracks-item, .modal-box .kingdom-row, .modal-box .siege-camp-status, .modal-box .tech-card, .modal-box .save-slot {
    background: rgba(255, 244, 214, 0.35) !important; border: 1px solid rgba(74, 47, 23, 0.5) !important; color: #1d140a !important; box-shadow: none !important;
}
.modal-box .kingdom-info b { color: #4a1d06 !important; }
.modal-box .gold-btn, .modal-box button:not(.btn-close-modal), .modal-box .menu-btn {
    background: url('../assets/images/original/ui/UI-Buttons_Q005.png') center / 100% 100% no-repeat !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: #1a1006 !important; text-shadow: none !important; font-size: 15px !important; font-weight: 500 !important;
    min-height: 34px; padding: 6px 18px !important; cursor: pointer;
}
.modal-box .gold-btn:hover:not([disabled]), .modal-box button:not(.btn-close-modal):hover:not([disabled]) {
    background-image: url('../assets/images/original/ui/UI-Buttons_Q006.png') !important; filter: none !important; transform: none !important;
}
.modal-box button[disabled], .modal-box .gold-btn.disabled { opacity: 0.5; filter: grayscale(0.6); cursor: default; }
.modal-box .btn-close-modal {
    background: none !important; border: 0 !important; color: #4a2f17 !important; font-size: 20px !important; box-shadow: none !important; cursor: pointer;
}
.modal-box .btn-close-modal:hover { color: #8a1a12 !important; }
.modal-box input, .modal-box select, .modal-box textarea {
    background: rgba(255, 248, 228, 0.7) !important; color: #1d140a !important; border: 1px solid #6b4a24 !important; border-radius: 0 !important;
}

/* Game messages: plain lettering over the map, like the original's status lines */
#notification-ticker { top: 14px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); align-items: center; max-width: 70vw !important; gap: 2px !important; }
.notif-item {
    background: none !important; border: 0 !important; box-shadow: none !important; padding: 1px 8px !important;
    font: 500 19px var(--sh-font) !important; color: #f4e6c4 !important; text-align: center;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px #000;
}
#lord-dialogue-modal { font-family: var(--sh-font) !important; }

/* ===== Online world map (js/world-ui.js) ===== */
.world-box { width: min(980px, calc(100vw - 16px)) !important; max-height: 92vh; }
.world-box .modal-body { overflow-y: auto; max-height: 80vh; }
.world-login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.world-login input { padding: 6px 10px; font-size: 16px; min-width: 200px; }
.world-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 12px; align-items: start; }
.world-grid { display: grid; gap: 3px; background: #4a2f17; padding: 3px; border: 2px solid #2a1a0c; }
.world-land { position: relative; aspect-ratio: 1; padding: 3px; border: 0; cursor: pointer; text-align: left; overflow: hidden;
    background: linear-gradient(160deg, #8d9a5c, #5f7238) !important; color: #fff6dc !important; min-height: 0 !important;
    display: flex; flex-direction: column; justify-content: space-between; font-size: 10px !important; }
.world-land.open { background: linear-gradient(160deg, #a9b56a, #6d8740) !important; }
.world-land.home { outline: 3px solid #f1c40f; outline-offset: -3px; }
.world-land.selected { outline: 3px solid #fff; outline-offset: -3px; }
.world-land:hover { filter: brightness(1.12); }
.world-land-name { font-size: 10px; line-height: 1.05; text-shadow: 1px 1px 0 #000; }
.world-land-info { font-size: 9px; opacity: .9; text-shadow: 1px 1px 0 #000; }
.world-seats { display: flex; flex-wrap: wrap; gap: 2px; }
.world-seats i { width: 9px; height: 11px; border-radius: 0 0 5px 5px; opacity: .55; border: 1px solid rgba(0,0,0,.6); }
.world-seats i.human { opacity: 1; box-shadow: 0 0 0 1px #fff; }
.world-seats i.online { box-shadow: 0 0 0 1px #fff, 0 0 4px #ffe68a; }
.world-seats i.dead { opacity: .15; }
.world-details h4 { margin: 0 0 8px; }
.world-seat { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(74,47,23,.3); }
.world-seat i { width: 16px; height: 20px; border-radius: 0 0 8px 8px; flex: 0 0 16px; border: 1px solid #2a1a0c; }
.world-seat span { flex: 1; display: flex; flex-direction: column; }
.world-seat small { font-size: 12px; opacity: .8; }
.gold-btn.small, .modal-box .gold-btn.small { min-height: 26px !important; padding: 3px 10px !important; font-size: 13px !important; }
.diplo-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kingdom-row.diplo-offer { border-left-color: #f1c40f !important; }
@media (max-width: 760px) { .world-layout { grid-template-columns: 1fr; } .world-land-name { font-size: 8px; } }
#world-modal { z-index: 1200 !important; }

/* Original goods pictures used in place of emoji */
.goods-icon { height: 1.45em; width: auto; vertical-align: middle; margin: 0 1px; image-rendering: auto; }
.market-item-icon .goods-icon { height: 34px; }
.modal-box .btn-close-modal { font: 400 30px var(--sh-font) !important; line-height: 1 !important; }

/* Lord speaking: parchment banner at the top with the portrait in a carved frame */
#lord-dialogue-modal {
    top: 12px !important; left: 50% !important; right: auto !important; transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px)) !important; max-width: none !important;
    display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px !important;
    background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / cover !important;
    border: 5px solid #4a2f17 !important; border-radius: 2px !important;
    outline: 2px solid #b48a4c; outline-offset: -9px;
    box-shadow: 0 0 0 2px #1b1109, 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}
#lord-dialogue-modal.hidden { display: none !important; }
#lord-dialogue-modal .lord-avatar {
    width: 84px !important; height: 84px !important; flex: 0 0 84px; border-radius: 50% !important; overflow: hidden;
    border: 4px solid #6b4a24 !important; box-shadow: 0 0 0 2px #e0c27a, 0 0 0 4px #3a2410 !important; background: #2a1a0c;
}
#lord-dialogue-modal h4 { margin: 0 0 4px !important; color: #3a1d08 !important; font: 600 20px var(--sh-font) !important; text-shadow: none !important; }
#lord-dialogue-modal p { margin: 0 !important; color: #1d140a !important; font: 500 17px var(--sh-font) !important; font-style: normal !important; line-height: 1.25 !important; }

/* World map drawn like an old parchment chart */
.world-grid { background: #6b4a24 !important; border: 4px solid #3a2410 !important; box-shadow: inset 0 0 0 2px #b48a4c; }
.world-land { background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / 400% auto !important; color: #2a1a0c !important;
    box-shadow: inset 0 0 6px rgba(74, 47, 23, 0.55); }
.world-land.open { background-color: #e6cf98 !important; box-shadow: inset 0 0 0 2px rgba(74, 47, 23, 0.65), inset 0 0 8px rgba(74, 47, 23, 0.5); }
.world-land-name, .world-land-info { text-shadow: none !important; color: #2a1a0c; font-family: var(--sh-font); }
.world-land.home { outline: 3px solid #8a1a12 !important; }
.world-land.selected { outline: 3px solid #f1c40f !important; }
.world-seats i { border-radius: 0 0 5px 5px; border: 1px solid #2a1a0c; }
.world-land.open { background: #e6cf98 url('../assets/images/original/ui/parchment.jpg') 30% 40% / 400% auto !important; }
.world-land:not(.open) { filter: sepia(0.35) brightness(0.9); }

/* Online chat line, above the bottom panel */
#chat-box { position: fixed; left: 50%; bottom: 22vh; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - 32px)); }
#chat-box.hidden { display: none; }
#chat-box input { width: 100%; padding: 8px 12px; font: 500 17px var(--sh-font); color: #1d140a;
    background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / cover; border: 4px solid #4a2f17; outline: 2px solid #b48a4c; outline-offset: -8px; }

/* Castle windows and siege camp built from the original pieces */
.ohud-buildings .opanel-btn, .ohud-buildings .repair-btn {
    position: absolute; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
    background: url('../assets/images/original/ui/UI-Buttons_Q005.png') center / 100% 100% no-repeat; color: #1a1006;
    font: 500 15px var(--sh-font); white-space: nowrap;
}
.ohud-buildings .opanel-btn:hover, .ohud-buildings .repair-btn:hover { background-image: url('../assets/images/original/ui/UI-Buttons_Q006.png'); }
.ohud-buildings .repair-btn { width: 170px !important; height: 30px !important; }
.ohud-buildings .repair-btn.disabled { opacity: .55; cursor: default; }
.ohud-buildings .siege-panel { position: absolute; right: 0; bottom: 0; width: 800px; height: 170px; pointer-events: none; }
.ohud-buildings .siege-machine { position: absolute; bottom: 44px; width: 45px; height: 86px; pointer-events: auto; cursor: pointer; }
.ohud-buildings .siege-machine > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ohud-buildings .siege-machine:hover > img { filter: brightness(1.15) drop-shadow(0 0 3px #fff3b0); }
.ohud-buildings .siege-cost { position: absolute; left: -16px; top: 88px; width: 80px; text-align: center; font-size: 12px; color: #1d140a; line-height: 1.1; white-space: nowrap; }
.ohud-buildings .siege-status { position: absolute; left: 400px; top: 42px; width: 165px; font-size: 14px; color: #1d140a; white-space: normal; line-height: 1.2; }
.ohud-buildings .siege-bar { position: absolute; left: 400px; top: 100px; width: 160px; height: 12px; border: 1px solid #3a2410; background: rgba(60, 40, 20, 0.35); }
.ohud-buildings .siege-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a5a18, #d8b24a); }

/* Campaign to a neighbouring land (troop panel) */
.ohud-buildings .march-box { position: absolute; left: 330px; bottom: 160px; width: 300px; padding: 10px 12px; pointer-events: auto;
    display: flex; flex-direction: column; gap: 6px; background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / cover;
    border: 4px solid #4a2f17; outline: 2px solid #b48a4c; outline-offset: -8px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.ohud-buildings .march-box.hidden { display: none; }
.ohud-buildings .march-box .march-dir { position: relative; width: 100%; }
.ohud-buildings .march-title { font-size: 17px; color: #3a1d08; text-align: center; }

/* Scribe's briefing at the start */
#briefing-modal { z-index: 1100 !important; }
.briefing-box { width: min(640px, calc(100vw - 16px)) !important; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; }
.briefing-box .modal-header, .briefing-actions { flex: none; }
.briefing-box .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.briefing-box .modal-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.briefing-box .modal-body .briefing-offline { padding: 10px 12px; border: 1px solid #8b6a33; background: rgba(255, 238, 180, .45); font-weight: bold; }
.briefing-steps { margin: 6px 0 0 20px; padding: 0; font-size: 15px; line-height: 1.35; }
.briefing-steps li { margin-bottom: 6px; }
.briefing-actions { display: flex; justify-content: center; padding: 6px 0 12px; }

/* Scribe's next-step hint and the starting stores (as in the original free build) */
.ohud-hint { position: absolute; left: 350px; bottom: 172px; max-width: 430px; padding: 4px 12px; font: 600 15px var(--sh-font);
    color: #f7ecd2; background: rgba(24, 18, 9, 0.82); border: 1px solid rgba(180, 138, 76, 0.45); white-space: normal;
    line-height: 1.25; pointer-events: none; text-shadow: 0 1px 2px #000; }
.ohud-hint.hidden { display: none; }
/* The Crusader mercenary camp: a short list of hireable soldiers and the lord's purse. */
.ohud-buildings .merc-panel { position: absolute; left: 0; bottom: 0; width: 800px; height: 170px; pointer-events: none; }
.ohud-buildings .merc-btn { position: absolute; height: 32px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; padding: 0 4px; white-space: nowrap; }
.ohud-buildings .merc-btn { justify-content: flex-start; gap: 7px; }
.ohud-buildings .merc-portrait { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; flex: 0 0 30px; }
.ohud-buildings .merc-label { overflow: hidden; text-overflow: ellipsis; }
.ohud-buildings .merc-price { margin-left: auto; flex: 0 0 auto; }
.ohud-buildings .merc-btn .goods-icon { height: 14px; margin-left: 3px; vertical-align: -2px; }
.ohud-buildings .merc-note { position: absolute; left: 34px; bottom: 4px; font-size: 12.5px; color: #3b2a12; }
#start-resources { position: fixed; left: 0; top: 0; z-index: 30; padding: 6px 10px; min-width: 120px; background: rgba(28, 22, 14, 0.78);
    border: 1px solid rgba(180, 138, 76, 0.5); color: #f4e6c4; font: 500 15px var(--sh-font); pointer-events: none; }
#start-resources.hidden { display: none; }
#start-resources .start-res-title { margin-bottom: 4px; }
#start-resources .start-res-row { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
#start-resources .goods-icon { height: 20px; }

/* ===== Мир уделов: sign-in, parchment world map, letters (js/world-ui.js) ===== */
.world-box { width: min(1100px, calc(100vw - 16px)) !important; max-height: calc(100vh - 16px) !important; display: flex; flex-direction: column; }
.world-box .modal-body.world-body { overflow: auto; max-height: none; flex: 1; min-height: 0; }
.world-box .modal-header { gap: 10px; }
.world-account { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 15px; }
.world-account.hidden, .world-main.hidden, .world-auth.hidden, .world-pane.hidden, .world-pick.hidden { display: none !important; }
.world-auth-intro { font-size: 16px; line-height: 1.35; margin: 0; }
.world-auth-switch { display: none; }
.world-auth-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.world-auth-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(255, 244, 214, 0.35); border: 1px solid rgba(74, 47, 23, 0.5); }
.world-auth-form h4 { margin: 0 0 2px; font-size: 18px; }
.world-auth-form label { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.world-auth-form input { padding: 7px 9px; font-size: 16px; }
.register-biomes { margin: 2px 0 0; padding: 7px; border: 1px solid rgba(74,47,23,.48); min-width: 0; }
.register-biomes legend { padding: 0 5px; font-size: 14px; font-weight: 700; }
.biome-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.biome-card { position: relative; display: flex; flex-direction: column; gap: 2px !important; padding: 3px; text-align: center; cursor: pointer; font-size: 11px !important; line-height: 1.1; border: 1px solid rgba(74,47,23,.3); background: rgba(255,244,214,.28); }
.biome-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.world-auth-form .biome-card input { padding: 0 !important; font-size: 0 !important; }
.biome-card:focus-within { outline: 2px solid #8a1a12; outline-offset: 1px; }
.biome-card.selected { border-color: #8a1a12; box-shadow: inset 0 0 0 1px #8a1a12, 0 0 0 1px rgba(138,26,18,.2); background: rgba(255,231,172,.65); }
.biome-mini { position: relative; overflow: hidden; display: block; width: 100%; height: 27px; border: 1px solid rgba(53,38,17,.48); background: #91a45a; }
.biome-mini::before, .biome-mini::after { content: ''; position: absolute; }
.biome-mini::before { left: 41%; top: -12%; width: 20%; height: 130%; transform: rotate(33deg); border-radius: 50%; background: rgba(68,128,153,.92); box-shadow: 0 0 0 3px rgba(68,128,153,.28); }
.biome-mini::after { width: 20px; height: 9px; right: 12%; bottom: 0; border-radius: 70% 70% 10% 10%; background: rgba(99,92,66,.65); }
.biome-random { background: linear-gradient(135deg,#9bb468 0 29%,#6d9a7b 29% 38%,#c2ae76 38% 67%,#91a45a 67%); }
.biome-random::before { left: 53%; transform: rotate(-30deg); }
.biome-valley { background: linear-gradient(160deg,#71934d,#9bac62 48%,#607e41); }
.biome-lakes { background: radial-gradient(ellipse at 28% 50%,#5285a0 0 22%,transparent 24%),radial-gradient(ellipse at 76% 48%,#5285a0 0 28%,transparent 30%),#899a56; }
.biome-highlands { background: linear-gradient(155deg,transparent 0 35%,#77735d 36% 45%,transparent 46%),linear-gradient(25deg,transparent 0 58%,#5e5b4c 59% 68%,transparent 69%),#a49b7e; }
.biome-forest { background: radial-gradient(circle at 20% 30%,#3d693c 0 10%,transparent 11%),radial-gradient(circle at 55% 70%,#365f35 0 13%,transparent 14%),radial-gradient(circle at 84% 26%,#466f3a 0 14%,transparent 15%),#81934f; }
.biome-coast { background: linear-gradient(155deg,#56879d 0 29%,#c5b782 30% 36%,#879b58 37%); }
.biome-marsh { background: radial-gradient(ellipse at 24% 54%,#648c8b 0 15%,transparent 17%),radial-gradient(ellipse at 76% 35%,#628888 0 19%,transparent 21%),#858f5b; }
.biome-plains { background: linear-gradient(145deg,#b9a76c,#c8b877 45%,#a3975f); }
.biome-desert { background: radial-gradient(ellipse at 78% 56%,#517f63 0 8%,#82a56b 9% 15%,transparent 16%),linear-gradient(160deg,#d8c28a,#c7ae72 50%,#b9a16b); }
#register-biome-description { min-height: 34px; margin: 5px 0 0; font-size: 12px; line-height: 1.25; }
.world-auth-form .gold-btn { align-self: flex-start; min-width: 160px; min-height: 32px !important; }
.world-auth-error { min-height: 20px; margin: 0; font-size: 15px; color: #b03a2e; }
.battle-report-box { width: min(520px, calc(100vw - 20px)) !important; max-height: calc(100vh - 24px); overflow-y: auto; color: #2b1d0c !important;
    background: #d9c08a url('../assets/images/original/ui/parchment.jpg') center / cover !important; border: 5px solid #4a2f17 !important; }
#battle-report-modal { z-index: 1350 !important; }
.battle-report-subtitle { text-align: center; margin: 0 0 10px; font-size: 15px; }
.battle-report-rows { display: grid; grid-template-columns: 1fr auto; gap: 0 18px; padding: 8px 12px; background: rgba(255,244,214,.36); border: 1px solid rgba(74,47,23,.4); }
.battle-report-rows > div { display: contents; }
.battle-report-rows span, .battle-report-rows b { padding: 5px 0; border-bottom: 1px dotted rgba(74,47,23,.3); }
.battle-report-rows b { text-align: right; }
.battle-report-note { text-align: center; font-size: 13px; opacity: .8; }
@media (max-width: 900px) and (max-height: 500px) {
    .world-box .modal-header { min-height: 34px; padding: 4px 8px; }
    .world-box .modal-body.world-body { padding: 8px; }
    .world-auth-intro { display: none; }
    .world-auth-switch.visible { display: flex; gap: 6px; }
    .world-auth-switch button { flex: 1; min-height: 26px; padding: 3px 8px; color: #f3e3b8; border: 0; font: 500 13px var(--sh-font);
        background: url('../assets/images/original/ui/opt/Button_01_Left.png') left / auto 100% no-repeat, url('../assets/images/original/ui/opt/Button_01_Right.png') right / auto 100% no-repeat, url('../assets/images/original/ui/opt/Button_01_Center.png') center / auto 100% repeat-x; }
    .world-auth-switch button.active { color: #ffe28b; filter: brightness(1.18); }
    .world-auth-forms { gap: 5px; grid-template-columns: 1fr; }
    .world-auth-form { gap: 3px; padding: 6px; }
    .world-auth-form h4 { font-size: 15px; }
    #form-register h4 { display: none; }
    .world-auth-form label { gap: 1px; font-size: 12px; }
    .world-auth-form input:not([type="radio"]) { height: 24px; min-height: 24px; padding: 2px 6px; }
    #form-register { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    #form-register h4, #form-register .register-biomes, #form-register > .gold-btn { grid-column: 1 / -1; }
    .register-biomes { padding: 4px; }
    .register-biomes legend { font-size: 12px; }
    .biome-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
    .biome-card { gap: 1px !important; padding: 2px; font-size: 9px !important; }
    .biome-mini { height: 16px; }
    #register-biome-description { display: none; }
    .world-auth-form .gold-btn { min-height: 24px !important; }
}
.world-auth-foot { display: flex; justify-content: flex-end; }
.world-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.world-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid rgba(74, 47, 23, 0.45); padding-bottom: 6px; }
.modal-box .world-tab { min-width: 110px; min-height: 30px !important; font-size: 15px !important; opacity: .75; }
.modal-box .world-tab.active { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 220, 140, .9)) !important; }
.world-tab b { color: #8a1a12 !important; }
.world-status { margin-left: auto; font-size: 14px; color: #3b2a16; }
.world-pick { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(138, 26, 18, 0.15); border: 1px solid #8a1a12; font-size: 15px; }
.world-pick span { flex: 1; }
.world-box .world-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 12px; align-items: start; }
.world-map-wrap { width: 100%; aspect-ratio: 1; max-height: calc(100vh - 190px); border: 4px solid #4a2f17; box-shadow: inset 0 0 0 2px #b48a4c; background: #c9b07a; }
.world-map-wrap canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.world-details { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.world-details h4 { margin: 0; font-size: 19px; }
.world-info { display: flex; flex-direction: column; gap: 3px; }
.world-info > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted rgba(74, 47, 23, 0.4); padding: 2px 0; }
.world-info > div > span:first-child { opacity: .75; }
.world-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.modal-box .world-actions .gold-btn { min-width: 150px; }
.world-legend { font-size: 13px !important; line-height: 1.3; opacity: .85; margin: 4px 0 0; }
.world-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.world-letter { padding: 8px 10px; background: rgba(255, 244, 214, 0.35); border: 1px solid rgba(74, 47, 23, 0.45); }
.world-letter.unread { border-left: 4px solid #8a1a12; }
.world-letter-head { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.world-letter p { margin: 4px 0 0; font-size: 16px; line-height: 1.3; white-space: pre-wrap; }
.world-empty { opacity: .75; }
.world-charters { display: flex; flex-direction: column; gap: 10px; }
.charter-rank { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border: 1px solid rgba(74,47,23,.5); background: rgba(255,244,214,.35); }
.charter-rank strong { font-size: 20px; }
.charter-rank p, .charter-rank small { grid-column: 1 / -1; margin: 0; line-height: 1.35; }
.charter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.charter-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-height: 150px; padding: 10px; border: 1px solid rgba(74,47,23,.5); background: rgba(255,244,214,.22); }
.charter-card h4, .charter-card p { margin: 0; }
.charter-card p { flex: 1; line-height: 1.3; }
.charter-card .gold-btn { margin-top: auto; }
.charter-card.is-complete { border-color: #648047; background: rgba(125,155,76,.16); }
.charter-card.is-claimed { opacity: .65; }
.charter-meter { display: flex; align-items: center; gap: 8px; width: 100%; font-variant-numeric: tabular-nums; }
.charter-meter > span:first-child { min-width: 52px; font-weight: 700; }
.charter-bar { height: 8px; flex: 1; overflow: hidden; border: 1px solid rgba(74,47,23,.5); background: rgba(74,47,23,.12); }
.charter-bar i { display: block; height: 100%; background: #718d3d; }
.charter-week { opacity: .8; }
.world-tab:disabled, .charter-card button:disabled { cursor: default; opacity: .65; }
.world-lords { width: 100%; border-collapse: collapse; font-size: 15px; }
.world-lords th, .world-lords td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(74, 47, 23, 0.3); }
.world-lords tbody tr { cursor: pointer; }
.world-lords tbody tr:hover { background: rgba(255, 244, 214, 0.45); }
.account-body form { margin-bottom: 4px; }
@media (max-width: 760px), (max-height: 520px) {
    .world-box .world-layout { grid-template-columns: 1fr; }
    .world-map-wrap { max-height: 70vh; max-width: 70vh; margin: 0 auto; }
    .charter-grid { grid-template-columns: 1fr; }
    .charter-card { min-height: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
    .world-box .world-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); }
    .world-map-wrap { max-height: calc(100vh - 120px); max-width: calc(100vh - 120px); }
    .world-box .modal-header { padding: 4px 10px !important; }
}

/* ===== Settings window (js/settings.js) ===== */
#modal-settings .modal-box { width: min(620px, calc(100vw - 16px)) !important; max-height: calc(100vh - 16px); display: flex; flex-direction: column; }
#settings-body { overflow-y: auto; gap: 10px; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid rgba(74, 47, 23, 0.45); padding-bottom: 6px; }
.modal-box .settings-tab { min-width: 118px; opacity: .72; }
.modal-box .settings-tab.active { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 220, 140, .9)) !important; }
.settings-panes { display: flex; flex-direction: column; gap: 2px; }
.settings-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dotted rgba(74, 47, 23, 0.35); font-size: 16px; cursor: pointer; }
.settings-row input[type=range] { width: min(220px, 40vw); accent-color: #7a4b12; }
.settings-row input[type=checkbox] { width: 22px; height: 22px; accent-color: #7a4b12; grid-column: 2 / 4; justify-self: end; }
.settings-row select { padding: 4px 6px; font-size: 15px; grid-column: 2 / 4; }
.settings-row output { min-width: 34px; text-align: right; font-size: 15px; }
.settings-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-keys { font-size: 13px !important; line-height: 1.4; opacity: .85; margin: 0; }
#fps-counter { position: fixed; top: 4px; right: 8px; z-index: 50; padding: 2px 8px; font: 600 14px var(--sh-font); color: #f4e6c4;
    background: rgba(20, 15, 8, 0.7); border: 1px solid rgba(180, 138, 76, 0.5); pointer-events: none; }
#fps-counter.hidden { display: none; }

/* ===== Phones and tablets (landscape) ===== */
#touch-bar { display: none; }
body.touch.in-game #touch-bar { display: flex; flex-direction: column; gap: 6px; position: fixed; right: max(6px, env(safe-area-inset-right)); top: 50%; transform: translateY(-62%); z-index: 40; }
#touch-bar.hidden { display: none !important; }
#touch-bar button { width: 46px; height: 46px; border: 0; padding: 0; font: 600 22px/1 var(--sh-font); color: #2a1a0c;
    background: url('../assets/images/original/ui/UI-Buttons_Q005.png') center / 100% 100% no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
#touch-bar button:active, #touch-bar button.on { background-image: url('../assets/images/original/ui/UI-Buttons_Q006.png'); color: #8a1a12; }
#rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
    #rotate-hint { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; text-align: center;
        background: #171512 url('../assets/images/original/ui/parchment.jpg') center / cover; }
    #rotate-hint > div { display: flex; flex-direction: column; gap: 12px; padding: 24px; max-width: 320px; font-family: var(--sh-font); color: #1d140a; }
    #rotate-hint b { font-size: 24px; } #rotate-hint span { font-size: 17px; }
    #rotate-hint .gold-btn { align-self: center; min-width: 180px; min-height: 40px; color: #1a1006;
        background: url('../assets/images/original/ui/UI-Buttons_Q005.png') center / 100% 100% no-repeat; border: 0; }
}
/* Short screens (a phone held sideways): compact windows and a smaller resources box */
@media (max-height: 520px) {
    .modal-box { max-height: calc(100vh - 8px) !important; }
    .modal-box .modal-header { padding: 4px 10px !important; min-height: 0 !important; }
    .modal-box .modal-header h3 { font-size: 16px !important; }
    .modal-box .modal-body { padding: 6px 10px !important; gap: 6px !important; }
    .modal-box .gold-btn, .modal-box button:not(.btn-close-modal) { min-height: 34px !important; }
    .settings-row { padding: 3px 4px; font-size: 15px; }
    .world-auth-intro { font-size: 14px; }
    .world-auth-form { padding: 8px; gap: 5px; }
    .world-auth-form input { padding: 5px 8px; }
    #start-resources { transform: scale(0.75); transform-origin: top left; }
    #briefing-modal .modal-body { font-size: 14px !important; }
}
body.touch .ohud-build { touch-action: manipulation; }
body.touch #fps-counter { right: 60px; }

/* On a phone held sideways, the original HUD already uses the lower-right corner.
   Keep the touch commands above it in a compact, two-column palette. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    body.touch.in-game #touch-bar {
        display: grid;
        grid-template-columns: repeat(2, 40px);
        gap: 4px;
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        transform: none;
    }
    #touch-bar button { width: 40px; height: 40px; font-size: 20px; }
    #original-hud { right: max(0px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); }
    .ohud-corner { left: max(4px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) {
    .modal-box { padding: 6px 10px !important; }
    .modal-box .world-tab { min-height: 26px !important; min-width: 84px; font-size: 13px !important; }
    .world-tabs { padding-bottom: 3px; }
    .world-status { font-size: 12px; }
    .world-details { font-size: 13px; gap: 4px; }
    .world-details h4 { font-size: 16px; }
    .modal-box .world-actions .gold-btn { min-width: 120px; font-size: 12px !important; }
    .world-box .world-layout { grid-template-columns: minmax(0, 1fr) minmax(200px, 1.1fr) !important; }
    .world-map-wrap { max-height: calc(100vh - 96px) !important; max-width: calc(100vh - 96px) !important; margin: 0 !important; }
}

/* ===== "Основное меню игры" — the original options window (js/settings.js, images from tools/extract_original_options.py) ===== */
#modal-settings { align-items: center; justify-content: center; }
.sh-window { position: relative; width: min(1330px, 96vw); height: min(980px, 96vh); display: flex; flex-direction: column;
    background: url('../assets/images/original/ui/opt/Panel_BG.png') repeat; color: #1d140a; font-family: var(--sh-font);
    box-shadow: 0 0 0 4px #3a2410, 0 0 0 6px #b48a4c, 0 12px 60px rgba(0,0,0,.85); padding: clamp(18px, 3.5vh, 44px) clamp(18px, 3vw, 54px); }
.sh-window::before { content: ''; position: absolute; inset: 10px; pointer-events: none; border: 2px solid #8a6420; box-shadow: inset 0 0 0 3px rgba(58,36,16,.35); }
.sh-c { position: absolute; width: 46px; height: 46px; background: center / contain no-repeat; pointer-events: none; z-index: 2; }
.sh-c.tl { left: -8px; top: -8px; background-image: url('../assets/images/original/ui/opt/Panel_Corner_Top_Left.png'); }
.sh-c.tr { right: -8px; top: -8px; background-image: url('../assets/images/original/ui/opt/Panel_Corner_Top_Right.png'); }
.sh-c.bl { left: -8px; bottom: -8px; background-image: url('../assets/images/original/ui/opt/Panel_Corner_Bottom_Left.png'); }
.sh-c.br { right: -8px; bottom: -8px; background-image: url('../assets/images/original/ui/opt/Panel_Corner_Bottom_Right.png'); }
.sh-window-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 clamp(22px, 3.6vh, 40px) var(--sh-font); color: #1d140a; }
.sh-knot { width: 26px; height: 52px; background: url('../assets/images/original/ui/opt/Panel_CelticKnot.png') center / contain no-repeat; flex: 0 0 26px; }
.sh-divider { height: 12px; margin: 6px -10px 10px; background: url('../assets/images/original/ui/opt/Panel_Divider.png') center / 100% 100% no-repeat; }
.sh-window-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 0.85fr) 1.15fr; gap: clamp(14px, 3vw, 60px); }
.sh-opt-left { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 18px); padding-top: clamp(8px, 4vh, 50px); overflow-y: auto; }
.sh-red-btn { width: min(416px, 100%); min-height: clamp(34px, 4.6vh, 46px); border: 0; cursor: pointer; padding: 0 22px;
    font: 500 clamp(15px, 2vh, 21px) var(--sh-font); color: #f3e3b8; text-shadow: 1px 1px 1px #000;
    background: url('../assets/images/original/ui/opt/Button_01_Left.png') left center / auto 100% no-repeat,
                url('../assets/images/original/ui/opt/Button_01_Right.png') right center / auto 100% no-repeat,
                url('../assets/images/original/ui/opt/Button_01_Center.png') center / auto 100% repeat-x; }
.sh-red-btn:hover { background-image: url('../assets/images/original/ui/opt/Button_02_Left_.png'), url('../assets/images/original/ui/opt/Button_02_Right.png'), url('../assets/images/original/ui/opt/Button_02_Center.png'); }
.sh-red-btn.active { color: #ffd65a; }
.sh-red-btn.wide { width: 100%; font-size: clamp(13px, 1.8vh, 18px); }
.sh-back { margin-top: auto; width: min(320px, 80%); }
.sh-chicken { width: clamp(70px, 13vh, 132px); height: clamp(98px, 18vh, 184px); margin: clamp(6px, 3vh, 40px) 0; cursor: pointer;
    background: url('../assets/images/original/ui/opt/chicken1.png') center / contain no-repeat; }
.sh-chicken:hover { background-image: url('../assets/images/original/ui/opt/chicken2.png'); }
.sh-opt-right { position: relative; display: flex; flex-direction: column; min-height: 0; padding: clamp(10px, 2vh, 26px) clamp(12px, 2vw, 34px);
    background: rgba(160, 120, 70, 0.12); border: 3px solid #2b1a0c; box-shadow: inset 0 0 0 2px #b48a4c, inset 0 0 30px rgba(74,47,23,.25); }
.sh-opt-title { margin: 0 0 clamp(8px, 2vh, 22px); text-align: center; font: 500 clamp(19px, 2.8vh, 30px) var(--sh-font); color: #1d140a; }
.sh-opt-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(6px, 1.3vh, 14px); padding-right: 6px; }
.sh-opt-row { display: flex; align-items: center; gap: 14px; font: 500 clamp(15px, 2.1vh, 23px) var(--sh-font); color: #1d140a; }
.sh-opt-row.sh-row-select, .sh-opt-row.sh-row-range { justify-content: space-between; }
.sh-opt-row.sh-row-range { flex-wrap: wrap; padding: 6px 8px; background: rgba(74,47,23,.08); }
.sh-opt-row.sh-row-check { cursor: pointer; }
.sh-check { flex: 0 0 auto; width: clamp(24px, 3vh, 32px); height: clamp(24px, 3vh, 32px); background: #6b0f0c; border: 2px solid #3a0806;
    box-shadow: inset 0 0 0 1px #a8331f; position: relative; }
.sh-check.on::after { content: '✔'; position: absolute; inset: -4px 0 0 2px; font: 700 clamp(20px, 2.8vh, 30px)/1 sans-serif; color: #f1c232; text-shadow: 0 1px 1px #000; }
.sh-select { min-width: min(300px, 45%); padding: 8px 12px; font: 500 clamp(14px, 1.9vh, 19px) var(--sh-font); color: #f3e3b8; background: #6b0f0c;
    border: 2px solid #3a0806; box-shadow: inset 0 0 0 1px #a8331f; border-radius: 0; cursor: pointer; }
.sh-select option { background: #e8d5a8; color: #1d140a; }
.sh-slider { display: flex; align-items: center; gap: 10px; width: 100%; }
.sh-slider input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 26px; background: transparent; cursor: pointer; }
.sh-slider input[type=range]::-webkit-slider-runnable-track { height: 3px; background: #2b1a0c; }
.sh-slider input[type=range]::-moz-range-track { height: 3px; background: #2b1a0c; }
.sh-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border: 0;
    background: url('../assets/images/original/ui/opt/Slider_Thumb.png') center / contain no-repeat; }
.sh-slider input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; background: url('../assets/images/original/ui/opt/Slider_Thumb.png') center / contain no-repeat; }
.sh-slider output { min-width: 40px; text-align: right; font: 500 clamp(14px, 1.9vh, 19px) var(--sh-font); }
.sh-key-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; font: 500 clamp(13px, 1.8vh, 18px) var(--sh-font); }
.sh-key-head { opacity: .75; }
.sh-key { padding: 5px 8px; font: 500 clamp(13px, 1.8vh, 17px) var(--sh-font); color: #f3e3b8; background: #6b0f0c; border: 2px solid #3a0806; cursor: pointer; }
.sh-key.listening { color: #ffd65a; background: #8a1a12; }
.sh-opt-note { font-size: clamp(12px, 1.6vh, 15px); opacity: .8; margin: 6px 0 0; }
@media (max-height: 520px) {
    .sh-window { width: 98vw; height: 98vh; padding: 10px 14px; }
    .sh-chicken { display: none; }
    .sh-window-body { grid-template-columns: minmax(160px, 0.7fr) 1.3fr; gap: 10px; }
    .sh-opt-left { padding-top: 0; gap: 5px; }
    .sh-divider { margin: 2px -6px 4px; }
}
body.no-big-tooltips .ohud-tip-big .tip-row { display: none; }
/* "Показать компас": north of the land on the screen */
#compass { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #e8d5a8 55%, #6b4a24 57%, #3a2410 64%, transparent 66%); }
#compass::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 20px; margin: -20px 0 0 -2px; background: linear-gradient(#8a1a12 50%, #2b1d0c 50%);
    transform-origin: 50% 100%; transform: rotate(63deg); }
#compass b { position: absolute; right: -2px; top: -4px; font: 700 14px var(--sh-font); color: #f4e6c4; text-shadow: 0 0 3px #000; }
#compass.hidden { display: none; }

/* Windows opened from the main menu must stand above it (the menu screen is at 1000). */
.modal-overlay { z-index: 1150; }
#modal-settings { z-index: 1250 !important; }
#account-modal { z-index: 1300 !important; }

/* ===== Chat of the online world (js/chat.js) ===== */
#chat-box { display: none !important; }
#chat-panel { position: fixed; left: 8px; bottom: 120px; z-index: 60; width: min(470px, calc(100vw - 80px)); height: min(330px, 46vh); display: flex; flex-direction: column;
    background: url('../assets/images/original/ui/opt/Panel_BG.png') repeat; color: #1d140a; font-family: var(--sh-font);
    box-shadow: 0 0 0 3px #3a2410, 0 0 0 5px #b48a4c, 0 8px 30px rgba(0,0,0,.7); }
#chat-panel.hidden { display: none; }
.chat-tabs { display: flex; gap: 2px; padding: 4px 4px 0; }
.chat-tabs button { flex: 1; min-height: 30px; border: 0; cursor: pointer; padding: 0 6px; font: 500 14px var(--sh-font); color: #f3e3b8;
    background: url('../assets/images/original/ui/opt/Button_01_Left.png') left / auto 100% no-repeat, url('../assets/images/original/ui/opt/Button_01_Right.png') right / auto 100% no-repeat, url('../assets/images/original/ui/opt/Button_01_Center.png') center / auto 100% repeat-x; }
.chat-tabs button.active { color: #ffd65a; }
.chat-tabs button b { color: #9ec9ff; }
.chat-tabs .chat-close { flex: 0 0 34px; font-size: 20px; }
.chat-dm-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 16px; border-bottom: 1px solid rgba(74,47,23,.4); }
.chat-dm-head.hidden, .chat-log.hidden, .chat-people.hidden { display: none; }
.chat-dm-head span { flex: 1; font-weight: 600; }
.chat-dm-head button { border: 1px solid #6b4a24; background: rgba(255,244,214,.5); cursor: pointer; font: 500 13px var(--sh-font); padding: 2px 8px; }
.chat-log, .chat-people { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 15px; line-height: 1.3; }
.chat-line { margin-bottom: 3px; word-wrap: break-word; }
.chat-line small { opacity: .6; margin-right: 6px; font-size: 12px; }
.chat-line a { font-weight: 600; color: #6b1a0c; cursor: pointer; }
.chat-line.mine a { color: #1f4c8a; cursor: default; }
.chat-empty { opacity: .7; font-style: italic; padding: 10px 0; }
.chat-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-bottom: 3px; border: 1px solid rgba(74,47,23,.35);
    background: rgba(255,244,214,.35); cursor: pointer; font: 500 15px var(--sh-font); text-align: left; }
.chat-person i { width: 10px; height: 10px; border-radius: 50%; background: #8a8a8a; }
.chat-person i.on { background: #2e9e3e; box-shadow: 0 0 4px #5f5; }
.chat-person span { flex: 1; }
.chat-person b { background: #8a1a12; color: #fff; padding: 0 7px; border-radius: 9px; font-size: 13px; }
.chat-form { display: flex; gap: 4px; padding: 6px; border-top: 1px solid rgba(74,47,23,.4); }
.chat-form input { flex: 1; padding: 7px 10px; font: 500 15px var(--sh-font); color: #1d140a; background: rgba(255,248,228,.75); border: 1px solid #6b4a24; }
.chat-form button { width: 40px; border: 0; cursor: pointer; color: #f3e3b8; font-size: 16px; background: #6b0f0c; }
#chat-float { position: fixed; left: 10px; bottom: 130px; z-index: 55; max-width: min(560px, 70vw); pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
#chat-float.hidden { display: none; }
#chat-float div { font: 600 16px var(--sh-font); text-shadow: 1px 1px 2px #000, 0 0 4px #000; transition: opacity 1s; }
#chat-float div.fade { opacity: 0; }
#touch-bar button.badge::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #e33; margin: -16px 0 0 14px; }
@media (max-height: 520px) { #chat-panel { bottom: 8px; left: 56px; height: 62vh; } #chat-float { bottom: 40px; left: 56px; } }

/* ===== «Переговоры» with a bot lord ===== */
#talk-modal { z-index: 1260 !important; }
.talk-box { width: min(860px, calc(100vw - 16px)) !important; max-height: calc(100vh - 16px) !important; display: flex; flex-direction: column; }
.talk-body { display: grid !important; grid-template-columns: 200px 1fr; gap: 14px; min-height: 0; flex: 1; }
.talk-portrait { width: 200px; height: 240px; background: center / contain no-repeat; border: 3px solid #3a2410; box-shadow: inset 0 0 0 2px #b48a4c; background-color: rgba(58,36,16,.15); }
.talk-portrait.baron { background-size: 60%; }
.talk-status { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.talk-ai { opacity: .7; font-size: 13px; }
.talk-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.talk-log { flex: 1; min-height: 220px; max-height: 50vh; overflow-y: auto; padding: 8px 10px; background: rgba(255,244,214,.35); border: 1px solid rgba(74,47,23,.5); }
.talk-line { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.talk-line.lord b { color: #6b1a0c; }
.talk-line.player b { color: #1f4c8a; }
.talk-line.note { font-style: italic; color: #4a3a1e; text-align: center; font-size: 14px; }
.talk-empty { opacity: .75; font-style: italic; }
.talk-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.modal-box .talk-quick .gold-btn { font-size: 12px !important; min-height: 26px !important; }
.talk-form { display: flex; gap: 6px; }
.talk-form input { flex: 1; padding: 8px 10px; font-size: 16px; }
@media (max-width: 700px), (max-height: 520px) { .talk-body { grid-template-columns: 110px 1fr; } .talk-portrait { width: 110px; height: 130px; } .talk-log { min-height: 120px; } }

/* «Величайший лорд» — war statistics in the kingdoms window */
.war-stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.war-stats th, .war-stats td { padding: 3px 6px; border-bottom: 1px solid rgba(74,47,23,.3); text-align: center; }
.war-stats th:first-child, .war-stats td:first-child { text-align: left; }
.war-stats tr.mine td { font-weight: 700; background: rgba(241,196,15,.15); }

/* Auto-trade: two thumbs on one track, as in the original (sell marker above, buy marker below) */
input.xslider { -webkit-appearance: none; appearance: none; background: transparent; height: 26px; margin: 0; pointer-events: none; }
input.xslider.top { background: linear-gradient(#5a3a1c, #5a3a1c) center / 100% 5px no-repeat; border-radius: 3px; }
input.xslider::-webkit-slider-runnable-track { height: 26px; background: transparent; }
input.xslider::-moz-range-track { height: 26px; background: transparent; }
input.xslider::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; cursor: pointer; width: 18px; height: 13px; border: 0; }
input.xslider::-moz-range-thumb { pointer-events: auto; cursor: pointer; width: 18px; height: 13px; border: 0; border-radius: 0; }
input.xslider.top::-webkit-slider-thumb { background: #a8322a; clip-path: polygon(0 0, 100% 0, 50% 100%); margin-top: 0; }
input.xslider.top::-moz-range-thumb { background: #a8322a; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateY(-6px); }
input.xslider.bottom::-webkit-slider-thumb { background: #3f7a2a; clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-top: 13px; }
input.xslider.bottom::-moz-range-thumb { background: #3f7a2a; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateY(6px); }