@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Georgia', 'Palatino Linotype', 'Palatino', serif;
    color: #3a2a1a;
    line-height: 1.6;
    background-color: #f5e6c8;
}
body.game-page {
    background-color: #f5e6c8;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(139,105,20,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(139,105,20,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 10%, rgba(139,105,20,0.04) 0%, transparent 40%),
        url('/public/images/village-bg.jpg');
    background-attachment: fixed;
    background-size: auto, auto, auto, cover;
    background-position: 0 0, 0 0, 0 0, 50% 100%;
    background-repeat: repeat, repeat, repeat, no-repeat;
}

html.font-georgia body, html.font-georgia body * { font-family: Georgia, 'Times New Roman', serif; }
html.font-trebuchet body, html.font-trebuchet body * { font-family: 'Trebuchet MS', sans-serif; }
html.font-courier body, html.font-courier body * { font-family: 'Courier New', monospace; }
html.font-palatino body, html.font-palatino body * { font-family: 'Palatino Linotype', 'Book Antiqua', serif; }
html.font-script body, html.font-script body * { font-family: 'Monotype Corsiva', 'Brush Script MT', cursive; }
html.font-arial body, html.font-arial body * { font-family: Arial, sans-serif; }

#wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Header - minimalist top bar */
header {
    width: 100%;
    background: linear-gradient(135deg, #2c1810 0%, #3a2512 50%, #2c1810 100%);
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid #c8a84e;
    box-shadow: inset 0 1px 0 rgba(200,168,78,0.2), 0 2px 6px rgba(0,0,0,0.4);
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
header h1 a {
    color: #d4a844;
    text-decoration: none;
    font-size: 1.2em;
    font-family: 'MedievalSharp', 'Georgia', serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.village-switcher select {
    background: #1f0f08;
    color: #d4c094;
    border: 1px solid #5a3a1a;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.85em;
    font-family: 'Georgia', serif;
    cursor: pointer;
}
.village-switcher select:hover {
    border-color: #c8a84e;
}
.village-arrow {
    background: #1f0f08;
    color: #d4c094;
    border: 1px solid #5a3a1a;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 1em;
    cursor: pointer;
    line-height: 1;
    font-family: 'Georgia', serif;
    transition: all 0.15s;
}
.village-arrow:hover {
    background: #3a2512;
    color: #f0dbb5;
    border-color: #c8a84e;
}

/* Left sidebar navigation */
.nav-toggle { display: none; }

#main-nav {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    background: #2a1a0e;
    border: 1px solid #6a4a2a;
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
#main-nav a {
    color: #b8a888;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 0.88em;
    transition: all 0.15s;
    border-left: 3px solid transparent;
}
#main-nav a:hover {
    color: #f0dbb5;
    background: rgba(200,168,78,0.08);
    border-left-color: #c8a84e;
}
#main-nav a.nav-updates { margin-top: 12px; border-top: 1px solid rgba(200,168,78,0.3); padding-top: 8px; }
#main-nav a.nav-logout { margin-top: 4px; }
#main-nav a .unread-nav-count {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 1.5;
    vertical-align: middle;
}

/* Main content fills remaining space */
main {
    flex: 1;
    overflow-x: auto;
    background: #fcf3e0;
    border-radius: 4px;
    padding: 20px;
    min-height: 400px;
    border: 1px solid #c4a878;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 0 30px rgba(196,168,120,0.08);
}

h2 {
    color: #6b0000;
    margin-bottom: 15px;
    font-family: 'MedievalSharp', 'Georgia', serif;
    letter-spacing: 1px;
    font-weight: normal;
    border-bottom: 2px solid #c4a878;
    padding-bottom: 6px;
    text-shadow: 1px 1px 0 rgba(107,0,0,0.1);
}
h3 {
    color: #3a2512;
    margin: 10px 0;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* Login page – fullscreen background */
body.login-page {
    background-color: #1a0a06;
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/public/images/village-bg.jpg');
    background-size: cover;
    background-position: 50% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.login-page #wrapper {
    max-width: 100%;
    width: 100%;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
body.login-page .login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    width: 100%;
    max-width: 420px;
}
body.login-page .login-title {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 2.8em;
    color: #f0dbb5;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    text-align: center;
    letter-spacing: 2px;
    margin: 0;
}
body.login-page .auth-form {
    margin: 0;
    width: 100%;
}
body.login-page .discord-widget {
    margin: 0;
    width: 100%;
}
body.login-page main {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
body.login-page footer { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; background: transparent; border: none; padding: 4px; }
body.login-page footer a { color: #b8a070; text-decoration: underline; font-size: 0.8em; }
html.dark body.login-page .login-title { color: #f0dbb5; }

/* Auth forms */
.auth-form {
    max-width: 400px;
    margin: 40px auto;
    background: #fcf3e0;
    padding: 30px;
    border: 1px solid #c4a878;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.auth-form h2 { text-align: center; }
.auth-form label { display: block; margin: 10px 0; color: #3a2512; }
.auth-form input {
    width: 100%;
    padding: 8px;
    border: 1px solid #b8966a;
    border-radius: 3px;
    background: #fcf3e0;
    color: #3a2a1a;
    margin-top: 4px;
    font-family: 'Georgia', serif;
}

/* Discord-Widget auf Login-Seite */
.discord-widget {
    max-width: 280px;
    margin: 12px auto;
    background: #fcf3e0;
    padding: 0;
    border: 1px solid #c4a878;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow: hidden;
}
.discord-widget-title {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    padding: 8px 14px;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid #5a0000;
}
.discord-widget iframe {
    display: block;
    width: 100%;
    height: 360px;
    margin-top: -30px;
}
.discord-widget-iframe-wrap {
    height: 330px;
    overflow: hidden;
}
html.dark .discord-widget { background: #2a2a2a; border-color: #444; }
html.dark .discord-widget-title { background: linear-gradient(135deg, #555 0%, #444 100%); color: #ddd; border-bottom-color: #555; }

button, .btn {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    border: 1px solid #5a0000;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Georgia', serif;
    border-radius: 3px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
button:hover { background: linear-gradient(135deg, #a00000 0%, #800000 100%); }
button.btn-secondary, .btn-secondary {
    background: linear-gradient(135deg, #5a4a3a 0%, #3a2a1a 100%);
    border-color: #2c1810;
    color: #c8b88a;
}
button.btn-secondary:hover { background: linear-gradient(135deg, #6a5a4a 0%, #4a3a2a 100%); }

.error { color: #8b0000; margin: 10px 0; font-style: italic; }
.success { color: #2d5a27; margin: 10px 0; font-style: italic; }

/* Compact resource bar (troops/buildings pages) */
.resource-bar-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 8px 0 12px 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f5e6c8 0%, #e8d5a3 100%);
    border-radius: 4px;
    border: 1px solid #c4a878;
    font-size: 0.85em;
}
.resource-bar-compact .res-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.resource-bar-compact .res-icon {
    font-size: 1.1em;
}
.resource-bar-compact .res-rate {
    color: #8b6914;
    font-size: 0.85em;
}
html.dark .resource-bar-compact {
    background: #222;
    border-color: #444;
}
html.dark .resource-bar-compact .res-rate {
    color: #b8860b;
}

/* Resource grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px;
    margin: 4px 0;
}
.resource {
    background: linear-gradient(135deg, #f5e6c8 0%, #e8d5a3 100%);
    padding: 6px 10px;
    border-radius: 3px;
    border: 1px solid #c4a878;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.resource-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.res-name { font-weight: bold; color: #3a2512; font-size: 0.72em; }
.res-amount { color: #2d5a27; font-size: 0.88em; font-weight: bold; font-family: 'Courier New', monospace; }
.res-rate { color: #8b6914; font-size: 0.8em; }
.res-capacity { color: #6b5a3a; font-size: 0.8em; }
.res-capacity.full { color: #b22222; font-weight: bold; }
.resource-bar-wrap {
    height: 4px;
    background: #d4c094;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #b8966a;
}
.resource-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
    background: linear-gradient(90deg, #2d5a27 0%, #4a8c3f 100%);
    min-width: 2px;
}
.resource-bar.full { background: linear-gradient(90deg, #b22222 0%, #ff4444 100%); }
.resource-bar.wood { background: linear-gradient(90deg, #5a3a1a 0%, #8b6914 100%); }
.resource-bar.wood.full { background: linear-gradient(90deg, #b22222 0%, #ff4444 100%); }
.resource-bar.stone { background: linear-gradient(90deg, #4a4a4a 0%, #7a7a7a 100%); }
.resource-bar.stone.full { background: linear-gradient(90deg, #b22222 0%, #ff4444 100%); }
.resource-bar.food { background: linear-gradient(90deg, #2d5a27 0%, #4a8c3f 100%); }
.resource-bar.food.full { background: linear-gradient(90deg, #b22222 0%, #ff4444 100%); }
.resource-bar.gold { background: linear-gradient(90deg, #b8860b 0%, #d4a844 100%); }
.resource-bar.gold.full { background: linear-gradient(90deg, #b22222 0%, #ff4444 100%); }
.resource-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.72em;
    color: #6b5a3a;
}
.resource-full-info {
    font-size: 0.6em;
    color: #8b6914;
    text-align: right;
    line-height: 1;
}
.res-full-countdown {
    font-weight: bold;
    color: #3a2a1a;
}
.res-full-countdown[data-end="0"] { display: none; }

/* Rename village */
.rename-form { display: none; margin: 10px 0; gap: 8px; align-items: center; }
.rename-form.visible { display: flex; }
.rename-form input {
    background: #fcf3e0;
    border: 1px solid #b8966a;
    color: #3a2a1a;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 14px;
    font-family: 'Georgia', serif;
    width: 250px;
}
.rename-form button {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    border: 1px solid #5a0000;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 3px;
}
.rename-form button[type="button"] {
    background: #b8966a;
    color: #3a2a1a;
    border: 1px solid #8b6914;
}
.btn-rename {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.btn-rename:hover { opacity: 1; }
.protection-badge {
    background: #2d6a22;
    color: #f0e0c0;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.85em;
    margin-top: 4px;
}
.points-badge {
    background: #8b6914;
    color: #f0e0c0;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.85em;
    margin-top: 4px;
    margin-left: 6px;
}

/* Dashboard hub */
.dash-section {
    background: linear-gradient(135deg, #f0e0c0 0%, #e8d5a3 100%);
    padding: 12px 15px;
    border-radius: 3px;
    margin: 12px 0;
    border: 1px solid #c4a878;
}
.dash-section h3 { margin-bottom: 8px; color: #3a2a1a; }
.dash-more { font-size: 0.8em; font-weight: normal; color: #8b6914; }
.dash-cols { display: flex; gap: 15px; }
.dash-col { flex: 1; }
.dash-buildings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.dash-build-card {
    background: #fcf3e0;
    border: 1px solid #d4c094;
    border-radius: 3px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dash-build-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-build-name { font-weight: bold; font-size: 0.85em; color: #3a2a1a; }
.dash-build-level { font-size: 0.8em; color: #8b6914; background: #f0e0c0; padding: 1px 6px; border-radius: 3px; }
.dash-build-status { font-size: 0.8em; }
.dash-build-form { margin-top: 2px; }
.dash-build-form button {
    width: 100%;
    padding: 4px;
    background: #2c1810;
    color: #c8b88a;
    border: 1px solid #8b6914;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    font-family: 'Georgia', serif;
    transition: all 0.2s;
}
.dash-build-form button:hover { background: #4a2a1a; color: #f0dbb5; }
.troop-line {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    border-bottom: 1px solid #d4c094;
    font-size: 0.82em;
}
.troop-line:last-child { border-bottom: none; }
.troop-line-name { font-weight: bold; }
.troop-line-qty { color: #c0392b; font-family: 'Courier New', monospace; font-weight: bold; }
.troop-line-stats { font-size: 0.8em; color: #a08050; }
.power-bonus { display: block; font-size: 0.78em; color: #4ecca3; margin-top: 2px; }
.dim { color: #8b7a5a; font-style: italic; font-size: 0.9em; }

/* Military power */
.military-power {
    background: linear-gradient(135deg, #f0e0c0 0%, #e8d5a3 100%);
    padding: 12px 15px;
    border-radius: 3px;
    margin: 15px 0;
    border: 1px solid #c4a878;
}
.power-grid {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}
.power-stat {
    background: #fcf3e0;
    padding: 6px 12px;
    border-radius: 3px;
    text-align: center;
    flex: 1;
    border: 1px solid #d4c094;
}
.power-label {
    display: block;
    font-size: 0.72em;
    color: #6b5a3a;
    margin-bottom: 2px;
}
.power-value {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}
.power-attack .power-value { color: #8b0000; }
.power-defense .power-value { color: #2d5a27; }
.power-wall .power-value { color: #8b6914; }

/* Queue info */
.queue-info, .queues {
    background: #f0e0c0;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 6px 0;
    border: 1px solid #d4c094;
}
.queue-info h3, .queues h3 { font-size: 0.85em; margin: 0 0 4px 0; }
.queue-item { color: #8b6914; font-weight: bold; }

/* Shared utility classes */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b5a3a;
    font-style: italic;
}
.section-header {
    color: #3a2512;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-weight: normal;
    border-bottom: 1px solid #d4c094;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.section-header .section-link {
    font-size: 0.78em;
    font-family: 'Georgia', serif;
    font-weight: normal;
    color: #8b6914;
    text-decoration: none;
    float: right;
}
.section-header .section-link:hover { color: #d4a844; }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.card-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 6px;
}
.collapse-toggle {
    cursor: pointer;
    user-select: none;
}
.collapse-toggle:hover { opacity: 0.7; }
.collapse-body { overflow: hidden; transition: max-height 0.3s ease; }
.collapse-body.collapsed { max-height: 0; }

/* Building / Troop / Research cards */
.building-list, .troop-list, .research-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 5px;
    margin-top: 5px;
}
.building-card, .troop-card, .research-card {
    background: linear-gradient(135deg, #f5e6c8 0%, #f0dbb5 100%);
    border-radius: 3px;
    padding: 4px 6px;
    border: 1px solid #c4a878;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.building-card h3, .troop-card h3, .research-card h3 { color: #6b0000; font-size: 0.88em; font-weight: bold; margin: 0; }
.building-card > p, .troop-card > p, .research-card > p { margin: 1px 0; font-size: 0.78em; line-height: 1.25; }
.building-card .building-benefit { font-size: 0.75em; color: #6b5a3a; line-height: 1.2; }
.building-card .costs strong { font-size: 0.75em; }

.costs ul { list-style: none; margin: 0; font-size: 0.74em; display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.costs li { padding: 1px 4px; display: inline-block; background: rgba(196,168,120,0.15); border-radius: 2px; white-space: nowrap; }
.costs .insufficient { color: #8b0000; background: rgba(139,0,0,0.08); }
.costs p { margin: 1px 0; font-size: 0.76em; }
.building-card form { margin-top: 2px; }
.building-card form button { font-size: 0.78em; padding: 2px 10px; }
.building-card .status-blocked, .building-card .status-building { font-size: 0.76em; }
.building-card .status-building.countdown-card { margin: 2px 0; padding: 1px 6px; font-size: 0.74em; }

.status-building { color: #8b6914; font-weight: bold; }
.status-blocked { color: #8b0000; font-style: italic; }

.train-form { margin-top: 10px; }
.train-form input[type=number] {
    width: 60px;
    padding: 5px;
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 3px;
    color: #3a2a1a;
    font-family: 'Georgia', serif;
}

/* Map */
.map-grid {
    display: inline-block;
    background: #d4c094;
    padding: 2px;
    border-radius: 4px;
    margin: 10px 0;
    overflow: auto;
    max-width: 100%;
    max-height: 550px;
    border: 2px solid #b8966a;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.1);
}
.map-row { display: flex; }
.map-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    cursor: default;
    flex-shrink: 0;
    outline: 1px solid rgba(0,0,0,0.06);
    outline-offset: -1px;
    transition: transform 0.15s, z-index 0s;
    position: relative;
}
/* Grüntöne – 5 Stufen, über Hash 0-99 gemappt */
.map-cell.shade-0, .map-cell.shade-1, .map-cell.shade-2, .map-cell.shade-3, .map-cell.shade-4,
.map-cell.shade-5, .map-cell.shade-6, .map-cell.shade-7, .map-cell.shade-8, .map-cell.shade-9,
.map-cell.shade-10, .map-cell.shade-11, .map-cell.shade-12, .map-cell.shade-13, .map-cell.shade-14,
.map-cell.shade-15, .map-cell.shade-16, .map-cell.shade-17, .map-cell.shade-18, .map-cell.shade-19 { background: #7db85a; }
.map-cell.shade-20, .map-cell.shade-21, .map-cell.shade-22, .map-cell.shade-23, .map-cell.shade-24,
.map-cell.shade-25, .map-cell.shade-26, .map-cell.shade-27, .map-cell.shade-28, .map-cell.shade-29,
.map-cell.shade-30, .map-cell.shade-31, .map-cell.shade-32, .map-cell.shade-33, .map-cell.shade-34,
.map-cell.shade-35, .map-cell.shade-36, .map-cell.shade-37, .map-cell.shade-38, .map-cell.shade-39 { background: #6aaa4a; }
.map-cell.shade-40, .map-cell.shade-41, .map-cell.shade-42, .map-cell.shade-43, .map-cell.shade-44,
.map-cell.shade-45, .map-cell.shade-46, .map-cell.shade-47, .map-cell.shade-48, .map-cell.shade-49,
.map-cell.shade-50, .map-cell.shade-51, .map-cell.shade-52, .map-cell.shade-53, .map-cell.shade-54,
.map-cell.shade-55, .map-cell.shade-56, .map-cell.shade-57, .map-cell.shade-58, .map-cell.shade-59 { background: #5a9a3a; }
.map-cell.shade-60, .map-cell.shade-61, .map-cell.shade-62, .map-cell.shade-63, .map-cell.shade-64,
.map-cell.shade-65, .map-cell.shade-66, .map-cell.shade-67, .map-cell.shade-68, .map-cell.shade-69,
.map-cell.shade-70, .map-cell.shade-71, .map-cell.shade-72, .map-cell.shade-73, .map-cell.shade-74,
.map-cell.shade-75, .map-cell.shade-76, .map-cell.shade-77, .map-cell.shade-78, .map-cell.shade-79 { background: #4a8a2a; }
.map-cell.shade-80, .map-cell.shade-81, .map-cell.shade-82, .map-cell.shade-83, .map-cell.shade-84,
.map-cell.shade-85, .map-cell.shade-86, .map-cell.shade-87, .map-cell.shade-88, .map-cell.shade-89,
.map-cell.shade-90, .map-cell.shade-91, .map-cell.shade-92, .map-cell.shade-93, .map-cell.shade-94,
.map-cell.shade-95, .map-cell.shade-96, .map-cell.shade-97, .map-cell.shade-98, .map-cell.shade-99 { background: #3a7a1a; }


/* Dörfer – Terrain overlay + Icons */
.map-cell.my-village {
    background: linear-gradient(135deg, #4a8c3f 0%, #2d6a22 100%);
    cursor: pointer;
    outline: 2px solid #2d5a27;
    outline-offset: -2px;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.map-cell.other-village {
    background: linear-gradient(135deg, #8b2020 0%, #6b1010 100%);
    cursor: pointer;
    outline: 2px solid #5a1010;
    outline-offset: -2px;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.map-cell.player-village {
    background: linear-gradient(135deg, #d4b040 0%, #b89420 100%);
    cursor: pointer;
    outline: 2px solid #8a7018;
    outline-offset: -2px;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.map-cell.fortress-village {
    background: linear-gradient(135deg, #7a4090 0%, #5a2070 100%) !important;
    cursor: pointer;
    outline: 2px solid #4a1860;
    outline-offset: -2px;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.map-cell.my-village:hover, .map-cell.other-village:hover,
.map-cell.player-village:hover, .map-cell.fortress-village:hover {
    transform: scale(1.3);
    z-index: 10;
    outline: 2px solid #fff8e0;
    outline-offset: -3px;
}
.map-cell.other-village.selected, .map-cell.player-village.selected,
.map-cell.fortress-village.selected {
    outline: 2px solid #fff;
    outline-offset: -3px;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.map-cell.has-attack {
    animation: attack-blink 1s ease-in-out infinite alternate;
}
.map-cell.has-spy {
    animation: spy-blink 1s ease-in-out infinite alternate;
}
@keyframes attack-blink {
    from { box-shadow: 0 0 4px 2px rgba(255,80,80,0.4); }
    to   { box-shadow: 0 0 12px 4px rgba(255,0,0,0.8); }
}
@keyframes spy-blink {
    from { box-shadow: 0 0 4px 2px rgba(180,80,255,0.4); }
    to   { box-shadow: 0 0 12px 4px rgba(140,0,255,0.8); }
}

/* Map-Hover-Tooltip */
#map-tooltip {
    display: none;
    position: fixed;
    background: #fcf3e0;
    color: #3a2a1a;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #8b6914;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
#map-tooltip.visible { display: block; }
#map-tooltip .tt-name { color: #a04020; font-weight: bold; }
#map-tooltip .tt-owner { color: #e0c060; }
#map-tooltip .tt-travel { color: #208040; }
#map-tooltip .tt-power { color: #5a4a2a; }
#map-tooltip .tt-power .tt-atk { color: #a04020; }
#map-tooltip .tt-power .tt-def { color: #2060a0; }

.map-coords { font-size: 0.7em; color: #8b7a5a; font-weight: normal; }
.btn-fullscreen { font-size: 0.65em; font-weight: normal; color: #8b6914; text-decoration: none; margin-left: 8px; padding: 2px 8px; border: 1px solid #c4a878; border-radius: 3px; vertical-align: middle; }
.btn-fullscreen:hover { background: #e0c898; }
html.dark .btn-fullscreen { color: #c77; border-color: #555; }
html.dark .btn-fullscreen:hover { background: #3a3a3a; }
.map-info { font-size: 0.85em; margin: 4px 0 6px 0; color: #6b5a3a; }
.map-legend { font-size: 0.85em; color: #6b5a3a; }
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin: 0 2px 0 6px;
    border: 1px solid rgba(0,0,0,0.2);
}
.legend-dot.my { background: #4a8c3f; }
.legend-dot.player { background: #d4b040; }
.legend-dot.barb { background: #8b2020; }
.legend-dot.fortress { background: #7a4090; }

.map-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}
.zoom-btn {
    display: inline-block;
    background: linear-gradient(135deg, #f0e0c0 0%, #e0c898 100%);
    color: #3a2512;
    border: 1px solid #c4a878;
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.4;
    font-family: 'Georgia', serif;
}
.zoom-btn:hover { background: #e8d5a3; }
.zoom-btn.active {
    background: #2c1810;
    color: #f0dbb5;
    border-color: #8b6914;
    cursor: default;
    pointer-events: none;
}

/* Canvas map */
.map-canvas-page { width: 100%; }
.map-canvas-page .map-info { margin-bottom: 4px; }
.map-search { margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.map-search-input { width: 180px; padding: 4px 8px; border: 1px solid #b8966a; border-radius: 3px; background: #f5ead0; color: #2c1810; font-family: monospace; font-size: 0.95em; }
.map-search-btn { padding: 4px 12px; border: 1px solid #b8966a; border-radius: 3px; background: linear-gradient(135deg,#d4b85a,#c4a84a); color: #2c1810; cursor: pointer; font-size: 0.95em; }
.map-search-btn:hover { background: linear-gradient(135deg,#e4c86a,#d4b85a); }
html.dark .map-search-input { background: #3a3a3a; color: #ddd; border-color: #666; }
html.dark .map-search-btn { background: linear-gradient(135deg,#666,#555); color: #ddd; border-color: #666; }
html.dark .map-search-btn:hover { background: linear-gradient(135deg,#777,#666); }
.map-canvas-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.map-canvas-wrap {
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    position: relative;
    background: #3a2a1a;
    border-radius: 4px;
    border: 2px solid #b8966a;
    overflow: hidden;
}
#map-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}
#map-canvas:active { cursor: grabbing; }
.map-canvas-tooltip {
    display: none;
    position: fixed;
    background: #fcf3e0;
    color: #3a2a1a;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #8b6914;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.map-canvas-tooltip .tt-name { color: #a04020; font-weight: bold; }
.map-canvas-tooltip .tt-owner { color: #6b5a3a; font-size: 0.9em; }
.map-canvas-tooltip .tt-player { color: #d4b040; font-size: 0.9em; }
.map-canvas-tooltip .tt-travel { color: #208040; font-size: 0.9em; }
.map-canvas-tooltip .tt-power { color: #5a4a2a; font-size: 0.85em; }
.map-canvas-tooltip .tt-power .tt-atk { color: #a04020; }
.map-canvas-tooltip .tt-power .tt-def { color: #2060a0; }
.map-canvas-tooltip .tt-coords { color: #8b7a5a; font-size: 0.8em; margin-top: 2px; }

html.dark .map-canvas-wrap { border-color: #555; }
html.dark .map-canvas-tooltip { background: #2a2a2a; color: #ddd; border-color: #666; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
html.dark .map-canvas-tooltip .tt-name { color: #e88; }
html.dark .map-canvas-tooltip .tt-player { color: #d4b040; }

@media (max-width: 800px) {
    .map-canvas-layout { flex-direction: column; }
    .map-canvas-wrap { width: 100%; height: calc(100vw - 20px); }
}

.map-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}
.map-main { width: 500px; flex-shrink: 0; }
.map-error {
    background: #8b3a3a;
    color: #f0e0c0;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 10px;
    font-size: 0.85em;
    border: 1px solid #6b2020;
}
.attack-panel {
    flex: 1;
    min-width: 250px;
    background: #f0e0c0;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 0.85em;
    border: 1px solid #c4a878;
}
.attack-panel h3 { margin: 0 0 8px 0; font-size: 1em; color: #6b0000; }
.attack-panel .target-line {
    font-size: 0.9em;
    margin-bottom: 8px;
    color: #3a2512;
}
.ext-support-tag { color: #2d7a2d; font-size: 0.85em; }
.attack-panel table { width: 100%; border-collapse: collapse; }
.attack-panel th {
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid #d4c094;
    font-size: 0.85em;
    color: #6b5a3a;
}
.attack-panel td {
    padding: 3px 6px;
    border-bottom: 1px solid #d4c094;
    vertical-align: middle;
}
.attack-panel .tt-name { white-space: nowrap; }
.attack-panel .tt-count { text-align: center; color: #2d5a27; }
.attack-panel .tt-input { text-align: right; }
.attack-panel input[type=number] {
    width: 72px;
    padding: 2px 4px;
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 3px;
    color: #3a2a1a;
    font-size: 0.9em;
    font-family: 'Georgia', serif;
}
.attack-panel .btn-max {
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 2px;
    background: #e0c898;
    border: 1px solid #c4a878;
    cursor: pointer;
    color: #3a2512;
    border-radius: 2px;
}
.action-buttons { display: flex; gap: 6px; margin-top: 8px; }
.action-buttons button {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid #5a0000;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    color: #f0dbb5;
    transition: opacity 0.2s;
}
.action-buttons button:hover { opacity: 0.85; }
.btn-attack { background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%); }
.btn-defend { background: linear-gradient(135deg, #3a7d36 0%, #2d5a27 100%); border-color: #1e3a1a !important; }
.btn-transfer { background: linear-gradient(135deg, #d4a844 0%, #b8860b 100%); color: #2c1810 !important; border-color: #8b6914 !important; }
.btn-spy { background: linear-gradient(135deg, #6a5acd 0%, #4a3a9a 100%); color: #e8d5a3 !important; border-color: #5a4a7a !important; }
.btn-spy:hover { background: linear-gradient(135deg, #5a4abd 0%, #3a2a8a 100%); }

.battle-actions { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.btn-export, .btn-delete-reports { display: inline-block; padding: 6px 14px; border-radius: 3px; text-decoration: none; border: 1px solid; cursor: pointer; font-size: 0.9em; }
.btn-export { background: linear-gradient(135deg, #d4a844 0%, #b8860b 100%); color: #2c1810 !important; border-color: #8b6914 !important; }
.btn-export:hover { background: linear-gradient(135deg, #c49834 0%, #a8760a 100%); }
.btn-delete-reports { background: #8b3a3a; color: #fff !important; border-color: #6a2a2a !important; }
.btn-delete-reports:hover { background: #6e2e2e; }
.battle-reattack { margin-top: 10px; text-align: right; }
.btn-reattack { display: inline-block; padding: 4px 12px; border-radius: 3px; text-decoration: none; font-size: 0.85em; background: linear-gradient(135deg, #4a6a3a, #3a5a2a); color: #fff !important; border: 1px solid #2a4a1a; }
.btn-reattack:hover { background: linear-gradient(135deg, #3a5a2a, #2a4a1a); }

#transfer-fields label { display: block; margin: 4px 0; font-size: 0.85em; color: #3a2512; }
#transfer-fields .res-input { width: 70px; padding: 3px 5px; background: #fcf3e0; border: 1px solid #b8966a; border-radius: 3px; color: #3a2a1a; margin-left: 6px; text-align: right; font-family: 'Georgia', serif; }

/* Battle reports - Compact */
.battle-list { margin: 10px 0; }
.battle-report { border-radius: 3px; margin: 3px 0; border: 1px solid #c4a878; overflow: hidden; }
.battle-report.won { border-left: 3px solid #2d5a27; }
.battle-report.lost { border-left: 3px solid #8b0000; }
.battle-report summary {
    list-style: none; display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; cursor: pointer; background: #f5e6c8; font-size: 0.82em; user-select: none;
}
.battle-del-form { margin-left: auto; }
.battle-del-btn {
    background: none; border: none; cursor: pointer; font-size: 1em; padding: 0 4px;
    color: #8b0000; font-family: inherit; line-height: 1; opacity: 0.4;
}
.battle-del-btn:hover { opacity: 1; }
.battle-report summary:hover .battle-del-btn { opacity: 0.7; }
html.dark .battle-del-btn { color: #e77; }
.battle-report summary::-webkit-details-marker { display: none; }
.battle-report summary:hover { background: #f0dbb5; }
.battle-date { color: #6b5a3a; min-width: 105px; font-family: monospace; font-size: 0.9em; }
.battle-icon { min-width: 18px; text-align: center; }
.battle-dir { color: #6b5a3a; min-width: 12px; text-align: center; }
.battle-target { flex: 1; color: #3a2512; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-owner { color: #8b7355; font-size: 0.9em; margin-left: 6px; }
.battle-owner::before { content: '('; }
.battle-owner::after { content: ')'; }
.battle-verdict { font-weight: bold; min-width: 70px; }
.battle-report.won .battle-verdict { color: #2d5a27; }
.battle-report.lost .battle-verdict { color: #8b0000; }
.battle-report.spy-report { border-left: 3px solid #6a5acd; }
.battle-report.spy-report.lost { border-left: 3px solid #8b3a3a; }
.battle-report.spy-report summary { background: #e8e0f5; }
.battle-report.spy-report.lost summary { background: #f5e0e0; }
.battle-troop-summary { color: #6b5a3a; font-family: monospace; font-size: 0.9em; min-width: 70px; text-align: right; }
.battle-luck { font-weight: bold; font-size: 0.9em; min-width: 45px; text-align: right; }
.battle-luck.good { color: #2d5a27; }
.battle-luck.bad { color: #8b0000; }
.battle-details {
    display: flex; gap: 8px; padding: 6px 8px;
    background: #fcf3e0; flex-wrap: wrap; border-top: 1px solid #d4c094;
}
.battle-details-cols { display: flex; gap: 15px; flex-wrap: wrap; }
.battle-col { flex: 1; min-width: 160px; }
.battle-col strong { color: #3a2512; font-size: 0.82em; display: block; margin-bottom: 2px; }
.battle-troops { line-height: 1.5; font-size: 0.82em; }
.battle-unit {
    display: inline-block; background: #f5e6c8; padding: 1px 5px; border-radius: 2px;
    margin: 1px; font-size: 0.9em; border: 1px solid #d4c094; white-space: nowrap;
}
.battle-loss { color: #8b0000; font-weight: bold; }
.battle-loot { padding: 3px 6px; color: #8b6914; font-size: 0.82em; display: flex; gap: 6px; flex-wrap: wrap; }
.battle-conquest { color: #c8a84e; font-weight: bold; font-size: 0.82em; padding: 3px 6px; }
.battle-offdeff { padding: 3px 6px 0; font-size: 0.82em; display: flex; gap: 8px; flex-wrap: wrap; }
.off-value { color: #a04020; }
.deff-value { color: #2060a0; }
.carry-value { color: #6a8a30; }
.deff-effective { color: #208040; cursor: help; border-bottom: 1px dotted #208040; }

/* Troops overview */
.troops-overview ul { list-style: none; padding: 0; }
.troops-overview li { padding: 3px 0; }

footer {
    width: 100%;
    text-align: center;
    padding: 20px;
    color: #6b5a3a;
    font-size: 0.9em;
}

a { color: #6b0000; }
a:hover { color: #8b0000; }

/* ----- Truppenbewegungen ----- */
/* === Compact movement rows (movements page) === */
.movements-section { margin: 16px 0; }
.movements-section h3 {
    border-bottom: 1px solid #d4c094;
    padding-bottom: 6px;
    margin-bottom: 6px;
    color: #3a2512;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-weight: normal;
    font-size: 1em;
}
.movements-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 3px 0;
    background: linear-gradient(135deg, #f5e6c8 0%, #f0dbb5 100%);
    border-radius: 2px;
    border-left: 3px solid #6b5a3a;
    font-size: 0.82em;
    line-height: 1.3;
    transition: opacity 0.3s;
}
.movements-row.attack-out { border-left-color: #8b0000; }
.movements-row.attack-in { border-left-color: #c8a84e; }
.movements-row.spy { border-left-color: #6a5acd; }
.movements-row.support-out { border-left-color: #3a7d36; }
.movements-row.support-in { border-left-color: #4a8c3f; }
.movements-row.return { border-left-color: #2d5a27; }
.movements-row.transfer { border-left-color: #8b6914; }
.movements-dir { font-weight: bold; min-width: 14px; text-align: center; }
.movements-target { white-space: nowrap; color: #3a2a1a; }
.movements-target strong { color: #5a3a1a; }
.movements-village { white-space: nowrap; font-size: 0.85em; color: #8b0000; }
.movements-units { display: flex; gap: 6px; flex-wrap: wrap; }
.movements-units span {
    background: #fcf3e0;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 0.9em;
    border: 1px solid #d4c094;
    cursor: help;
}
.movements-loot { color: #6b5a3a; font-size: 0.9em; white-space: nowrap; }
.movements-eta {
    margin-left: auto;
    white-space: nowrap;
    color: #8b6914;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}
.movements-eta .timer { font-weight: bold; }

/* Old movement-card styles (kept for dashboard compatibility) */
.movement-section { margin: 20px 0; }
.movement-section h3 {
    border-bottom: 1px solid #d4c094;
    padding-bottom: 8px;
    margin-bottom: 12px;
    color: #3a2512;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-weight: normal;
}
.movement-card {
    background: linear-gradient(135deg, #f5e6c8 0%, #f0dbb5 100%);
    border-radius: 3px;
    padding: 12px 16px;
    margin: 8px 0;
    border-left: 4px solid #6b5a3a;
    border-top: 1px solid #c4a878;
    border-right: 1px solid #c4a878;
    border-bottom: 1px solid #c4a878;
    transition: opacity 0.3s;
}
.movement-card.attack-out { border-left-color: #8b0000; }
.movement-card.attack-in { border-left-color: #c8a84e; }
.movement-card.support-out { border-left-color: #3a7d36; }
.movement-card.support-in { border-left-color: #4a8c3f; }
.movement-card.return { border-left-color: #2d5a27; }
.movement-card.arriving {
    animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.5; background: #e8d5a3; }
}
.movement-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.movement-target { font-size: 1.1em; color: #3a2a1a; }
.movement-countdown {
    font-size: 1em;
    color: #8b6914;
    font-family: 'Courier New', monospace;
}
.movement-countdown .timer {
    font-weight: bold;
    font-size: 1.1em;
}
.movement-troops {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.movement-unit {
    background: #fcf3e0;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 0.9em;
    color: #3a2512;
    border: 1px solid #d4c094;
}
.movement-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8em;
    color: #6b5a3a;
}
.movement-resources {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 8px 0;
    padding-top: 4px;
    border-top: 1px solid #d4c094;
}
.movement-more {
    margin-top: 10px;
    font-size: 0.9em;
    text-align: center;
}

/* Dashboard Movement Summary */
.movement-summary {
    background: linear-gradient(135deg, #f0e0c0 0%, #e8d5a3 100%);
    border-radius: 3px;
    padding: 10px 14px;
    margin-top: 12px;
    border: 1px solid #c4a878;
}
.movement-summary .movement-section { margin: 8px 0; }
.movement-summary .movement-section h4 {
    font-size: 0.88em;
    margin-bottom: 4px;
    color: #3a2512;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-weight: normal;
}
.movement-stats { display: flex; gap: 15px; margin: 8px 0; }
.movement-stats .stat {
    padding: 4px 12px;
    border-radius: 2px;
    background: #fcf3e0;
    font-size: 0.9em;
    border: 1px solid #d4c094;
}
.movement-stats .stat.attack-out { color: #8b0000; }
.movement-stats .stat.attack-in { color: #8b6914; }
.movement-stats .stat.return { color: #2d5a27; }

/* Attack Alert Banner */
.attack-alert {
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    padding: 12px 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    animation: alert-pulse 1.5s ease-in-out infinite alternate;
    border: 1px solid #c8a84e;
}
@keyframes alert-pulse {
    from { box-shadow: 0 0 8px rgba(139,0,0,0.4); }
    to { box-shadow: 0 0 20px rgba(139,0,0,0.8); }
}
.attack-alert .alert-icon { font-size: 1.5em; }
.attack-alert .alert-text { flex: 1; font-size: 1.1em; }
.attack-alert .alert-btn {
    background: #c8a84e;
    color: #2c1810;
    padding: 6px 16px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
    transition: background 0.2s;
    font-family: 'Georgia', serif;
}
.attack-alert .alert-btn:hover { background: #d4b85a; }
.attack-alert-global .alert-text { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attack-alert-global .alert-village { font-size: 0.85em; background: rgba(0,0,0,0.1); padding: 2px 8px; border-radius: 3px; }

/* Welcome Overlay */
.welcome-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: welcome-fade 0.4s ease;
}
@keyframes welcome-fade { from { opacity: 0; } to { opacity: 1; } }
.welcome-box {
    background: #f5ead0; border: 2px solid #c8a84e; border-radius: 6px;
    max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 28px 30px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    position: relative;
}
.welcome-box h2 { color: #8b6914; margin: 0 0 8px 0; font-size: 1.3em; text-align: center; }
.welcome-intro { color: #3a2a1a; font-size: 0.95em; margin: 10px 0 16px 0; text-align: center; line-height: 1.5; }
.welcome-tips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.welcome-tip { background: #efe0c0; border-left: 3px solid #8b6914; padding: 8px 12px; border-radius: 2px; font-size: 0.88em; color: #3a2a1a; line-height: 1.4; }
.tip-icon { margin-right: 6px; }
.welcome-btn {
    display: block; text-align: center; background: #6b3a00; color: #f0dbb5;
    padding: 10px 20px; border-radius: 3px; text-decoration: none; font-size: 1em;
    font-weight: bold; transition: background 0.2s; font-family: 'Georgia', serif;
}
.welcome-btn:hover { background: #8b4a00; }

/* Globaler Alert fuers alle Doerfer */
.global-alert {
    width: 100%;
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    padding: 10px 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #c8a84e;
    flex-wrap: wrap;
    animation: alert-pulse 1.5s ease-in-out infinite alternate;
}
.global-alert .alert-icon { font-size: 1.3em; }
.global-alert .alert-text { flex: 1; font-size: 0.95em; }
.global-alert .alert-village {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    font-size: 0.85em;
}
.global-alert .alert-btn {
    background: #c8a84e;
    color: #2c1810;
    padding: 5px 14px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background 0.2s;
    font-family: 'Georgia', serif;
}
.global-alert .alert-btn:hover { background: #d4b85a; }

/* ----- Countdown-Karten (Bau/Training/Forschung) ----- */
.countdown-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fcf3e0;
    padding: 4px 10px;
    border-radius: 2px;
    margin: 3px 0;
    gap: 8px;
    border: 1px solid #d4c094;
}
.countdown-label { color: #3a2512; font-size: 0.82em; }
.countdown-timer {
    color: #8b6914;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.05em;
    white-space: nowrap;
}
.countdown-wait {
    color: #8b7a5a;
    font-style: italic;
    font-size: 0.88em;
}
.countdown-card.waiting { border-color: #b8a888; opacity: 0.7; }
.queue-info .countdown-card:first-child { margin-top: 10px; }
.status-building.countdown-card { border-color: #8b6914; }
.btn-cancel-queue {
    background: none;
    border: none;
    color: #8b3a3a;
    font-size: 1em;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.6;
}
.btn-cancel-queue:hover { opacity: 1; }
html.dark .btn-cancel-queue { color: #d46a6a; }
.costs p {
    color: #8b6914;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    margin-top: 5px;
}

/* Barracks Table */
.troop-capacity { font-size: 0.9em; color: #6b5a3a; margin: 8px 0 12px 0; padding: 6px 12px; background: #fcf3e0; border-radius: 3px; border: 1px solid #d4c094; display: inline-block; }
.troop-capacity strong { color: #3a2512; }
.barracks-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.barracks-table th {
    background: #e8d5a3;
    padding: 3px 6px;
    text-align: left;
    font-size: 0.75em;
    color: #3a2512;
    border-bottom: 2px solid #c4a878;
}
.barracks-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #d4c094;
    vertical-align: middle;
    font-size: 0.82em;
}
.barracks-table tr:hover td { background: rgba(200,168,120,0.15); }
.barracks-table .unit-name { font-weight: bold; color: #6b0000; font-size: 0.95em; }
.barracks-table .unit-count {
    font-size: 0.9em;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    color: #2d5a27;
}
.barracks-table .unit-costs { font-size: 0.72em; line-height: 1.3; }
.barracks-table .unit-costs .train-time {
    display: block;
    color: #8b6914;
    margin-top: 1px;
}
.barracks-table .unit-action { min-width: 120px; }
.barracks-table .unit-action .train-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    margin: 0;
}
.barracks-table .unit-action input[type=number] {
    width: 55px;
    padding: 2px 3px;
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 2px;
    color: #3a2a1a;
    font-family: 'Georgia', serif;
    font-size: 0.82em;
}
.barracks-table .unit-action button {
    padding: 2px 6px;
    font-size: 0.78em;
    white-space: nowrap;
}
.train-input-group {
    display: flex;
    gap: 2px;
    align-items: center;
}
.train-input-group .btn-max {
    padding: 2px 5px;
    font-size: 0.72em;
    background: #e0c898;
    border: 1px solid #c4a878;
    cursor: pointer;
    color: #3a2512;
    border-radius: 2px;
    line-height: 1;
}
.train-input-group .btn-max:hover {
    background: #d4b85a;
}
.max-hint {
    width: 100%;
    display: block;
    color: #6b5a3a;
    font-size: 0.75em;
    text-align: right;
    line-height: 1;
}
.max-hint strong {
    font-size: 1.4em;
    color: #3a2a1a;
}
.barracks-table .unit-action .status-blocked.small {
    font-size: 0.7em;
    color: #6b5a3a;
}
.barracks-table .countdown-card {
    margin: 1px 0;
    padding: 1px 4px;
    font-size: 0.75em;
    min-height: auto;
    gap: 3px;
}
.barracks-table .countdown-label { font-size: 0.82em; }
.barracks-table .countdown-timer { font-size: 0.82em; }
.barracks-table .insufficient { color: #8b0000; }

.dismiss-form {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    vertical-align: middle;
}
.dismiss-input {
    width: 40px;
    padding: 1px 2px;
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 2px;
    color: #3a2a1a;
    font-size: 0.8em;
    font-family: 'Georgia', serif;
    text-align: center;
}
.btn-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.btn-dismiss:hover { opacity: 1; }
html.dark .dismiss-input { background: #333; color: #ccc; border-color: #555; }
html.dark .btn-dismiss { opacity: 0.4; }
html.dark .btn-dismiss:hover { opacity: 1; }

/* Settlement Form */
.settlement-form {
    background: #f0e0c0;
    border-radius: 3px;
    padding: 20px 24px;
    max-width: 400px;
    margin: 40px auto;
    text-align: center;
    border: 1px solid #c4a878;
}
.settlement-form h2 { color: #8b6914; margin-bottom: 12px; }
.settlement-form p { margin-bottom: 16px; color: #3a2512; }
.settlement-form label { display: block; margin: 10px 0; color: #3a2a1a; }
.settlement-form input[type=number] {
    width: 100px;
    padding: 6px;
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 3px;
    color: #3a2a1a;
    text-align: center;
    margin-left: 8px;
    font-family: 'Georgia', serif;
}
.settlement-form button {
    margin-top: 16px;
    padding: 8px 24px;
    background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5;
    border: 1px solid #5a0000;
    border-radius: 3px;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Georgia', serif;
}
.settlement-form button:hover { background: linear-gradient(135deg, #a00000 0%, #800000 100%); }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.level-badge {
    font-size: 0.75em;
    color: #8b6914;
    background: #f0e0c0;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.benefit-preview {
    font-size: 0.76em;
    color: #2d5a27;
    padding: 2px 6px;
    margin: 2px 0;
    background: rgba(45,90,39,0.08);
    border-radius: 2px;
    line-height: 1.25;
}
.costs-compact {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 2px 0;
}
.costs-compact .build-time {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.72em;
    color: #8b6914;
    font-weight: bold;
}
.building-benefit {
    color: #2d5a27;
    font-size: 0.9em;
    padding: 4px 8px;
    margin: 6px 0;
    background: rgba(45,90,39,0.08);
    border-radius: 2px;
}

/* Research bonus summary */
.research-bonus-summary {
    background: #f0e0c0;
    border: 1px solid #c4a878;
    border-radius: 3px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.research-bonus-summary h3 {
    font-size: 0.95em;
    margin: 0 0 6px 0;
}
.research-bonus-item {
    display: inline-block;
    margin: 3px 12px 3px 0;
    color: #2d5a27;
}
.research-bonus-item strong { color: #1e3a1a; }

/* Login page extra parchment */
.auth-form {
    background: #fcf3e0;
    padding: 30px;
    border: 1px solid #c4a878;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
}



/* ----- Messages ----- */
.messages-page h2 { display: flex; align-items: center; gap: 10px; }
.unread-badge { font-size: 0.72em; background: #8b0000; color: #f0dbb5; padding: 3px 10px; border-radius: 10px; font-family: 'Georgia', serif; }
.msg-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid #c4a878; padding-bottom: 0; }
.msg-tab {
    padding: 6px 14px; text-decoration: none; color: #6b5a3a; font-size: 0.85em;
    border: 1px solid transparent; border-bottom: none; border-radius: 3px 3px 0 0;
    margin-bottom: -2px; transition: all 0.2s;
}
.msg-tab.active { background: #fcf3e0; border-color: #c4a878; color: #3a2512; font-weight: bold; }
.msg-tab:hover { color: #3a2512; }

.msg-list { display: flex; flex-direction: column; gap: 2px; }
.msg-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    text-decoration: none; color: #3a2a1a; border-radius: 2px;
    background: #f5e6c8; font-size: 0.85em; transition: background 0.15s;
}
.msg-row:hover { background: #f0dbb5; }
.msg-row.unread { background: #f0e0c0; font-weight: bold; border-left: 3px solid #8b0000; }
.msg-icon { color: #6b5a3a; min-width: 16px; text-align: center; }
.msg-peer { min-width: 120px; color: #6b0000; }
.msg-subject { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-date { color: #6b5a3a; font-family: monospace; font-size: 0.9em; white-space: nowrap; min-width: 110px; text-align: right; }

.msg-row-wrap { display: flex; align-items: center; gap: 4px; }
.msg-row-wrap .msg-row { flex: 1; }
.msg-del-form { margin: 0; display: flex; }
.msg-del-btn { background: none; border: none; color: #8b3a3a; cursor: pointer; font-size: 0.8em; padding: 4px 6px; border-radius: 2px; }
.msg-del-btn:hover { background: #e0c0b0; }

.msg-detail {
    background: #fcf3e0; border: 1px solid #c4a878; border-radius: 3px; padding: 16px;
}
.msg-detail-head { margin-bottom: 12px; }
.msg-detail-subject { display: block; font-size: 1.1em; font-weight: bold; color: #6b0000; margin-bottom: 4px; }
.msg-detail-meta { font-size: 0.8em; color: #6b5a3a; }
.msg-detail-body {
    background: #f5e6c8; border: 1px solid #d4c094; border-radius: 3px;
    padding: 12px; line-height: 1.6; font-size: 0.9em; margin-bottom: 12px;
}
.msg-detail-actions { display: flex; gap: 8px; align-items: center; }
.msg-btn-small {
    padding: 5px 12px; background: #e0c898; border: 1px solid #c4a878;
    color: #3a2512; font-size: 0.82em; border-radius: 3px; cursor: pointer;
    text-decoration: none; font-family: 'Georgia', serif;
}
.msg-btn-small:hover { background: #d4b85a; }
.msg-btn-danger { background: #8b0000; color: #f0dbb5; border-color: #5a0000; }
.msg-btn-danger:hover { background: #a00000; }

.msg-compose { background: #fcf3e0; border: 1px solid #c4a878; border-radius: 3px; padding: 16px; }
.msg-field { margin-bottom: 10px; }
.msg-field label { display: block; font-size: 0.82em; color: #6b5a3a; margin-bottom: 3px; }
.msg-input {
    width: 100%; padding: 6px 8px; border: 1px solid #b8966a; border-radius: 3px;
    background: #fcf3e0; color: #3a2a1a; font-family: 'Georgia', serif; font-size: 0.9em;
}
.msg-textarea {
    width: 100%; padding: 8px; border: 1px solid #b8966a; border-radius: 3px;
    background: #fcf3e0; color: #3a2a1a; font-family: 'Georgia', serif; font-size: 0.9em;
    resize: vertical;
}
.msg-btn {
    padding: 8px 20px; background: linear-gradient(135deg, #8b0000 0%, #6b0000 100%);
    color: #f0dbb5; border: 1px solid #5a0000; border-radius: 3px; cursor: pointer;
    font-size: 0.9em; font-family: 'Georgia', serif;
}
.msg-btn:hover { background: linear-gradient(135deg, #a00000 0%, #800000 100%); }

.msg-search-results { margin: -5px 0 10px 0; border: 1px solid #c4a878; border-top: 0; border-radius: 0 0 3px 3px; max-height: 150px; overflow-y: auto; }
.msg-search-empty { padding: 8px 10px; font-size: 0.82em; color: #6b5a3a; font-style: italic; }
.msg-search-item {
    display: block; padding: 5px 10px; text-decoration: none; color: #3a2a1a;
    font-size: 0.85em; background: #f5e6c8; border-bottom: 1px solid #d4c094;
}
.msg-search-item:hover { background: #f0dbb5; }

/* Admin Panel */
.admin-panel h2 { margin-bottom: 15px; }
.admin-msg { background: #4a8c3f; color: #fff; padding: 8px 12px; border-radius: 3px; margin: 10px 0; }
.admin-stats { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.stat-card { background: #f0e0c0; padding: 4px 10px; border-radius: 3px; border: 1px solid #c4a878; text-align: center; flex: 1; min-width: 80px; font-size: 0.85em; }
.stat-value { display: block; font-size: 1.2em; font-weight: bold; font-family: 'Courier New', monospace; color: #6b0000; }
.admin-section { margin: 20px 0; }
.admin-section h3 { margin-bottom: 8px; color: #3a2a1a; }
.admin-title-badge { display: inline-block; font-size: 0.8em; color: #8b6914; background: #f0e0c0; padding: 1px 6px; border-radius: 3px; margin-left: 4px; font-weight: normal; }

.user-title { color: #f0e0c0; font-size: 0.85em; font-style: italic; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.admin-table th { background: #2c1810; color: #c8b88a; padding: 6px 8px; text-align: left; }
.admin-table td { padding: 5px 8px; border-bottom: 1px solid #d4c094; }
.admin-table tr:nth-child(even) td { background: #f9f0dc; }
.admin-table tr:hover td { background: #f0dbb5; }
.admin-table .disabled-user td { opacity: 0.55; }
.admin-table .status-ok { color: #2d6a22; font-weight: bold; }
.admin-table .status-blocked { color: #8b0000; font-weight: bold; }
.admin-btn-small { font-size: 0.85em; color: #8b6914; margin-right: 6px; }
.admin-btn-ai-on { color: #2d6a22 !important; font-weight: bold; }
.admin-coord-link { color: #6b0000; text-decoration: none; font-family: monospace; padding: 1px 4px; border-radius: 2px; }
.admin-coord-link:hover { background: #e0c898; }
html.dark .admin-coord-link { color: #c77; }
html.dark .admin-coord-link:hover { background: #3a3a3a; }
.admin-wipe { text-align: right; margin: 10px 0; }
.btn-wipe { display: inline-block; background: #600; color: #fff; padding: 8px 20px; border-radius: 4px; font-weight: bold; font-size: 1em; text-decoration: none; border: 1px solid #a00; }
.btn-wipe:hover { background: #800; }
.admin-hint { font-size: 0.8em; color: #8b7a5a; margin-top: 6px; }
.admin-delete { color: #8b0000; }
.admin-reset { color: #c08000; }
.admin-two-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-blessing-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-blessing-cols form { flex: 1; min-width: 260px; background: #f9f0dc; padding: 12px 16px; border-radius: 3px; border: 1px solid #d4c094; }
.admin-col { flex: 1; min-width: 260px; background: #f9f0dc; padding: 12px 16px; border-radius: 3px; border: 1px solid #d4c094; }
.admin-col h4 { margin: 0 0 10px 0; font-size: 1em; color: #3a2a1a; }
.admin-form-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.admin-form-table td { padding: 4px 6px; font-size: 0.88em; vertical-align: middle; }
.admin-form-table td:first-child { white-space: nowrap; font-weight: bold; }
.admin-form-table td:last-child { color: #6b5a3a; font-size: 0.82em; }
.admin-input { width: 100px; padding: 4px 6px; border: 1px solid #c4a878; border-radius: 2px; background: #fff; color: #3a2a1a; font-size: 0.95em; }
.admin-btn { background: #2c1810; color: #c8b88a; border: 1px solid #5a3a1a; padding: 6px 16px; border-radius: 3px; cursor: pointer; font-size: 0.9em; }
.admin-btn:hover { background: #3a2a1a; border-color: #c8a84e; }
.admin-troop-summary { margin-top: 10px; font-size: 0.85em; color: #3a2a1a; }
.admin-troop-summary .troop-line { margin-right: 14px; }

/* Options page */
.pending-page { max-width: 500px; margin: 40px auto; background: #f9f0dc; border: 1px solid #d4c094; border-radius: 4px; padding: 30px; text-align: center; }
.pending-page h2 { color: #3a2a1a; margin-bottom: 16px; }
.pending-page p { color: #6b5a3a; margin: 10px 0; line-height: 1.6; }
.pending-page .success { color: #2d6a22; font-weight: bold; }
.pending-logout { display: inline-block; margin-top: 16px; color: #8b6914; }
html.dark .pending-page { background: #1f1f1f; border-color: #3a3a3a; }
html.dark .pending-page h2 { color: #ddd; }
html.dark .pending-page p { color: #999; }
.options-page { max-width: 600px; }
.updates-page { max-width: 700px; }
.updates-intro { color: #6b5a3a; font-size: 0.95em; margin-bottom: 20px; }
.update-entry { background: #f9f0dc; border: 1px solid #d4c094; border-radius: 3px; padding: 16px 20px; margin: 14px 0; }
.update-entry:first-of-type { border-left: 3px solid #8b6914; }
.update-date { font-weight: bold; color: #3a2a1a; font-size: 1em; margin-bottom: 10px; }
.update-list { list-style: none; padding: 0; margin: 0; }
.update-list li { padding: 5px 0; color: #3a2a1a; font-size: 0.9em; line-height: 1.5; border-bottom: 1px solid #efe0c0; }
.update-list li:last-child { border-bottom: none; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 0.8em; font-weight: bold; margin-right: 6px; }
.tag-new { background: #2d6a22; color: #fff; }
.tag-fix { background: #3a6a9a; color: #fff; }
.tag-change { background: #8b6914; color: #fff; }
.options-section { background: #f9f0dc; border: 1px solid #d4c094; border-radius: 3px; padding: 16px 20px; margin: 14px 0; }
.options-section h3 { margin: 0 0 6px 0; color: #3a2a1a; }
.options-desc { color: #6b5a3a; font-size: 0.88em; margin: 0 0 12px 0; }
.options-danger { border-left: 3px solid #8b0000; }
.options-msg { background: #4a8c3f; color: #fff; padding: 8px 12px; border-radius: 3px; margin: 10px 0; }
.btn-reset { background: #8b3a3a; color: #fff; border: 1px solid #6a2a2a; padding: 10px 24px; border-radius: 3px; cursor: pointer; font-size: 1em; }
.btn-reset:hover { background: #a04030; }
.btn-donate { background: #3a7a3a; color: #fff; border: 1px solid #2a5a2a; padding: 6px 16px; border-radius: 3px; cursor: pointer; font-size: 0.85em; }
.btn-donate:hover { background: #4a9a4a; }
.theme-radios { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-option { display: flex; align-items: center; gap: 8px; background: #f0e0c0; border: 1px solid #c4a878; border-radius: 3px; padding: 10px 16px; cursor: pointer; }
.theme-option:hover { background: #e8d5a3; }
.theme-option input[type=radio] { accent-color: #8b6914; }
.theme-label { font-size: 0.95em; color: #3a2a1a; }

.font-radios { }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.font-option { display: flex; flex-direction: column; gap: 2px; background: #f0e0c0; border: 1px solid #c4a878; border-radius: 3px; padding: 4px 8px; cursor: pointer; font-size: 0.85em; }
.font-option:hover { background: #e8d5a3; }
.font-option input[type=radio] { accent-color: #8b6914; margin: 0; }
.font-label { font-weight: bold; color: #3a2a1a; font-size: 0.82em; }
.font-preview { font-size: 0.78em; color: #6b4a2a; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-map-wrap { width: 100%; height: 520px; margin-top: 8px; }

/* Attack confirmation modal */
.confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.65); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.confirm-modal {
    background: #f5e6c8; border: 2px solid #8b6914; border-radius: 6px;
    padding: 24px; max-width: 480px; width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    color: #3a2a1a;
}
.confirm-modal h3 { margin: 0 0 14px 0; font-size: 1.15em; color: #1f0f08; text-align: center; }
.confirm-troops { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.88em; }
.confirm-troops th { background: #2c1810; color: #c8b88a; padding: 5px 8px; text-align: left; }
.confirm-troops td { padding: 4px 8px; border-bottom: 1px solid #d4c094; }
.confirm-troops tr:nth-child(even) td { background: #f9f0dc; }
.confirm-troops tr.confirm-total td { background: #e8d5a3; border-top: 2px solid #8b6914; font-size: 0.95em; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.confirm-actions button { padding: 8px 20px; font-size: 1em; border-radius: 3px; cursor: pointer; border: none; }
.btn-confirm { background: #4a8c3f; color: #fff; }
.btn-confirm:hover { background: #3d7534; }
.confirm-travel { margin: 8px 0 0; font-size: 0.9em; color: #5a4a2a; text-align: center; }
.confirm-compare { margin: 6px 0 0; font-size: 0.9em; text-align: center; padding: 6px; background: #fcf3e0; border-radius: 3px; }
.btn-cancel { background: #8b3a3a; color: #fff; border: 1px solid #6a2a2a; border-radius: 2px; padding: 2px 10px; font-size: 0.8em; cursor: pointer; white-space: nowrap; }
.btn-cancel:hover { background: #6e2e2e; }
.cancel-form { display: inline; margin: 0; }
html.dark .btn-cancel { background: #6a2a2a; border-color: #4a1a1a; color: #ddd; }
html.dark .btn-cancel:hover { background: #551a1a; }

/* Scrollbar styling for medieval feel */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #e8d5a3; }
::-webkit-scrollbar-thumb { background: #b8966a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8b6914; }

/* ===== RESPONSIVE (≤ 768px) ===== */
@media (max-width: 768px) {
    #wrapper { padding: 10px; }
    header { flex-direction: column; align-items: stretch; gap: 6px; }
    header::before, header::after { display: none; }
    .header-left { flex-wrap: wrap; }
    header h1 a { font-size: 1.1em; }
    .village-switcher select { width: 100%; }
    .nav-toggle {
        display: block; background: #1f0f08; color: #c8b88a;
        border: 1px solid #5a3a1a; border-radius: 3px;
        padding: 6px 14px; font-size: 1.2em; cursor: pointer;
        text-align: center; width: 100%;
    }
    .nav-toggle:hover { border-color: #c8a84e; }
    #main-nav { width: 100%; }
    #main-nav.nav-open { display: flex; }
    #main-nav a {
        margin: 0; padding: 10px 12px; font-size: 1em;
        border-bottom: 1px solid rgba(200,168,120,0.15);
        display: block; border-left: none;
    }
    #main-nav a:hover { border-left-color: transparent; }
    main { padding: 12px; }
    h2 { font-size: 1.1em; }
    h3 { font-size: 1em; }
    .resource-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
    .resource { padding: 6px 10px; }
    .dash-cols { flex-direction: column; gap: 10px; }
    .power-grid { flex-direction: column; gap: 8px; }
    .dash-buildings { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
    .card-grid { grid-template-columns: 1fr; }
    .card-grid.compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .building-list, .research-list { grid-template-columns: 1fr; }
    .building-card, .research-card { padding: 4px 6px; }
    .building-card .costs ul { display: flex; flex-direction: column; gap: 1px; }
    .building-card .costs li { display: block; white-space: normal; }
    .costs-compact { flex-direction: column; align-items: flex-start; }
    .map-layout { flex-direction: column; }
    .map-main { width: 100%; }
    .map-grid { max-width: 100%; max-height: 400px; }
    .attack-panel { min-width: 0; width: 100%; }
    .map-controls { flex-wrap: wrap; }
    .zoom-btn { flex: 1; text-align: center; font-size: 14px; padding: 6px 4px; }
    .barracks-table { font-size: 0.78em; }
    .barracks-table th, .barracks-table td { padding: 6px 5px; }
    .barracks-table .unit-action .train-form { flex-direction: column; align-items: stretch; }
    .train-input-group { width: 100%; }
    .train-input-group input { flex: 1; }
    .barracks-table .unit-action button { width: 100%; }
    .max-hint { text-align: center; display: block; }
    .battle-report summary { flex-wrap: wrap; gap: 4px; padding: 5px 6px; }
    .battle-date { min-width: 80px; font-size: 0.8em; }
    .battle-verdict { min-width: auto; }
    .battle-troop-summary { display: none; }
    .battle-luck { min-width: auto; }
    .battle-details { flex-direction: column; }
    .msg-row { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
    .msg-peer { min-width: 80px; font-size: 0.9em; }
    .msg-date { min-width: auto; font-size: 0.8em; }
    .msg-tabs { flex-wrap: wrap; }
    .shop-page { max-width: 100%; }
    .shop-table { display: block; overflow-x: auto; }
    .msg-tab { flex: 1; text-align: center; font-size: 0.8em; padding: 8px 6px; }
    .movement-card { padding: 10px 12px; }
    .movement-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .movement-troops { gap: 6px; }
    .movements-row { flex-wrap: wrap; font-size: 0.78em; gap: 4px; padding: 3px 8px; }
    .movements-target { white-space: normal; }
    .admin-stats { flex-direction: column; }
    .admin-table { font-size: 0.78em; display: block; overflow-x: auto; white-space: nowrap; }
    .dash-section { padding: 10px 12px; }
    .queues .countdown-card { flex-direction: column; text-align: center; gap: 4px; }
    .attack-alert { flex-direction: column; text-align: center; gap: 6px; }
    .global-alert { flex-direction: column; text-align: center; }
    .countdown-card { flex-direction: column; text-align: center; gap: 4px; }
    .movement-summary .movement-section h4 { font-size: 0.9em; }
    .resource-bottom { font-size: 0.72em; }
    .settlement-form { margin: 20px 10px; }
    .auth-form { margin: 20px 10px; padding: 20px; }
    .map-info { font-size: 0.78em; line-height: 1.5; }
    .map-legend { display: block; margin-top: 3px; }
    .legend-dot { width: 8px; height: 8px; }
    .map-cell { touch-action: manipulation; }
    #transfer-fields .res-input { width: 100%; margin: 4px 0; display: block; }
    #transfer-fields label { display: flex; align-items: center; gap: 6px; }
    .confirm-modal { width: 95%; padding: 16px; }
    .confirm-modal h3 { font-size: 1em; }
    .confirm-troops { font-size: 0.78em; }
    .confirm-actions { flex-direction: column; }
    .confirm-actions button { width: 100%; }
    .attack-panel input[type=number] { width: 100%; }
    .attack-panel table { display: block; overflow-x: auto; white-space: nowrap; }
    .rename-form { flex-direction: column; }
    .rename-form input { width: 100%; }
    .research-bonus-item { display: block; margin: 4px 0; }
    .msg-detail-body { font-size: 0.85em; }
}

/* ===== SMALL PHONES (≤ 480px) ===== */
@media (max-width: 480px) {
    .resource-grid { grid-template-columns: 1fr; }
    header h1 a { font-size: 1em; }
    .dash-buildings { grid-template-columns: 1fr 1fr; }
    .barracks-table { font-size: 0.72em; }
    .barracks-table th, .barracks-table td { padding: 4px 3px; }
    .barracks-table .unit-costs { font-size: 0.75em; }
    .zoom-btn { font-size: 12px; padding: 5px 2px; }
    .map-coords { display: none; }
    .movement-meta { flex-direction: column; gap: 2px; font-size: 0.75em; }
    .action-buttons { flex-direction: column; }
    .action-buttons button { padding: 10px 4px; font-size: 0.9em; }
}

/* ===== TABLET (769-1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    #wrapper { padding: 15px; }
    .resource-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .map-main { width: 100%; }
    .map-layout { flex-direction: column; }
    .attack-panel { min-width: 0; width: 100%; }
}

/* ===== DARK MODE ===== */
html.dark #wrapper { background: #1a1a1a; box-shadow: none; border-color: #333; gap: 12px; }
html.dark body.game-page { color: #ccc; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/public/images/village-bg.jpg') 50% 100% / cover no-repeat fixed #111; }
html.dark header { background: #222; border-color: #333; }
html.dark header h1 a { color: #666; }
html.dark header h1 a:hover { color: #888; }
html.dark .village-switcher select { background: #333; color: #ccc; border-color: #555; }
html.dark #main-nav { background: #1e1e1e; border-color: #444; }
html.dark #main-nav a { color: #999; }
html.dark #main-nav a:hover { color: #eee; background: rgba(200,168,78,0.1); border-left-color: #c8a84e; }
html.dark .nav-toggle { background: #222; color: #aaa; border-color: #444; }
html.dark .max-hint { color: #999; }
html.dark .max-hint strong { color: #fff; }
html.dark .update-entry { background: #1f1f1f; border-color: #3a3a3a; }
html.dark .update-entry:first-of-type { border-left-color: #c8a84e; }
html.dark .update-date { color: #c8b88a; }
html.dark .update-list li { color: #ccc; border-bottom-color: #2a2a2a; }
html.dark main { background: #1a1a1a; }
html.dark h2, html.dark h3, html.dark h4 { color: #ddd; }
html.dark a { color: #8ab; }
html.dark a:hover { color: #acd; }
html.dark .dash-section, html.dark .section-card, html.dark .building-card, html.dark .research-card,
html.dark .movements-row, html.dark .movement-card, html.dark .attack-panel, html.dark .map-grid, html.dark .admin-col,
html.dark .options-section { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .dash-section h3, html.dark .section-card h3, html.dark .building-card h3,
html.dark .research-card h4, html.dark .movement-card h4 { color: #ddd; }
html.dark .resource { background: #222; border-color: #444; }
html.dark .resource .res-label { color: #aaa; }
html.dark .resource .res-amount { color: #eee; }
html.dark .resource .res-rate { color: #888; }
html.dark .resource-bar-wrap { background: #333; border-color: #555; }
html.dark .resource-bar { background: linear-gradient(90deg, #555, #777); }
html.dark .resource .res-capacity { color: #777; }
html.dark .res-capacity.full { color: #ff5555; }
html.dark .resource-full-info { color: #b8964a; }
html.dark .res-full-countdown { color: #ccc; }
html.dark table th { background: #333; color: #ccc; }
html.dark table td { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark table tr:nth-child(even) td { background: #303030; }
html.dark table tr:hover td { background: #3a3a3a; }
html.dark .admin-table th { background: #333; }
html.dark .admin-table td { background: #2a2a2a; border-color: #444; }
html.dark .admin-table tr:nth-child(even) td { background: #303030; }
html.dark .stat-card { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .stat-value { color: #ddd; }
html.dark .battle-report { background: #2a2a2a; border-color: #444; }
html.dark .battle-report summary { background: #333; color: #ccc; }
html.dark .battle-report summary:hover { background: #3a3a3a; }
html.dark .battle-summary .battle-date { color: #999; }
html.dark .battle-details { background: #252525; }
html.dark .battle-troop-summary { color: #999; }
html.dark .battle-report.spy-report summary { background: #2a2a3a; }
html.dark .battle-report.spy-report.lost summary { background: #3a2a2a; }
html.dark .battle-report.spy-report summary { background: #2a2a3a; }
html.dark .msg-row { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .msg-row:hover { background: #333; }
html.dark .msg-row.unread { background: #2a2a3a; }
html.dark .msg-peer { color: #ddd; }
html.dark .msg-date { color: #888; }
html.dark .msg-body { background: #252525; border-color: #444; color: #ccc; }
html.dark .msg-compose textarea, html.dark .msg-compose input { background: #333; color: #ccc; border-color: #555; }
html.dark .msg-tabs { border-color: #444; }
html.dark .msg-tab { background: #2a2a2a; color: #aaa; border-color: #444; }
html.dark .msg-tab.active { background: #3a3a3a; color: #fff; }
html.dark .countdown-card { background: #2a2a2a; border-color: #444; color: #fff; }
html.dark .countdown-label { color: #fff; }
html.dark .countdown-timer { color: #fff; }
html.dark .countdown-wait { color: #888; }
html.dark .countdown-card.waiting { opacity: 0.5; }
html.dark .queue-info, html.dark .queues { background: #2a2a2a; border-color: #444; color: #fff; }
html.dark .queue-item { color: #aaa; }
html.dark .attack-alert, html.dark .global-alert { background: #2a2a2a; border-color: #553; }
html.dark .attack-alert .alert-btn, html.dark .global-alert .alert-btn { background: #555; color: #ddd; }
html.dark .welcome-box { background: #2a2a2a; border-color: #665; }
html.dark .welcome-box h2 { color: #c8a84e; }
html.dark .welcome-intro { color: #ccc; }
html.dark .welcome-tip { background: #333; border-color: #c8a84e; color: #ccc; }
html.dark .welcome-btn { background: #4a3a10; color: #ddd; }
html.dark .welcome-btn:hover { background: #6a5a20; }
html.dark .troop-capacity { background: #2a2a2a; border-color: #444; color: #aaa; }
html.dark .troop-capacity strong { color: #ddd; }
html.dark .barracks-table th { background: #333; }
html.dark .barracks-table td { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .barracks-table tr:nth-child(even) td { background: #303030; }
html.dark .unit-costs .insufficient { color: #c55; }
html.dark .train-input-group input { background: #333; color: #ccc; border-color: #555; }
html.dark .btn-max { background: #444; border-color: #555; color: #ccc; }
html.dark .btn-max:hover { background: #555; }
html.dark .zoom-btn { background: #333; color: #aaa; border-color: #555; }
html.dark .zoom-btn.active { background: #555; color: #fff; border-color: #777; }
html.dark .zoom-btn:hover { background: #444; }
html.dark .map-grid { background: #d4c094; }
html.dark .map-cell.shade-0, html.dark .map-cell.shade-1, html.dark .map-cell.shade-2, html.dark .map-cell.shade-3, html.dark .map-cell.shade-4,
html.dark .map-cell.shade-5, html.dark .map-cell.shade-6, html.dark .map-cell.shade-7, html.dark .map-cell.shade-8, html.dark .map-cell.shade-9,
html.dark .map-cell.shade-10, html.dark .map-cell.shade-11, html.dark .map-cell.shade-12, html.dark .map-cell.shade-13, html.dark .map-cell.shade-14,
html.dark .map-cell.shade-15, html.dark .map-cell.shade-16, html.dark .map-cell.shade-17, html.dark .map-cell.shade-18, html.dark .map-cell.shade-19 { background: #7db85a; }
html.dark .map-cell.shade-20, html.dark .map-cell.shade-21, html.dark .map-cell.shade-22, html.dark .map-cell.shade-23, html.dark .map-cell.shade-24,
html.dark .map-cell.shade-25, html.dark .map-cell.shade-26, html.dark .map-cell.shade-27, html.dark .map-cell.shade-28, html.dark .map-cell.shade-29,
html.dark .map-cell.shade-30, html.dark .map-cell.shade-31, html.dark .map-cell.shade-32, html.dark .map-cell.shade-33, html.dark .map-cell.shade-34,
html.dark .map-cell.shade-35, html.dark .map-cell.shade-36, html.dark .map-cell.shade-37, html.dark .map-cell.shade-38, html.dark .map-cell.shade-39 { background: #6aaa4a; }
html.dark .map-cell.shade-40, html.dark .map-cell.shade-41, html.dark .map-cell.shade-42, html.dark .map-cell.shade-43, html.dark .map-cell.shade-44,
html.dark .map-cell.shade-45, html.dark .map-cell.shade-46, html.dark .map-cell.shade-47, html.dark .map-cell.shade-48, html.dark .map-cell.shade-49,
html.dark .map-cell.shade-50, html.dark .map-cell.shade-51, html.dark .map-cell.shade-52, html.dark .map-cell.shade-53, html.dark .map-cell.shade-54,
html.dark .map-cell.shade-55, html.dark .map-cell.shade-56, html.dark .map-cell.shade-57, html.dark .map-cell.shade-58, html.dark .map-cell.shade-59 { background: #5a9a3a; }
html.dark .map-cell.shade-60, html.dark .map-cell.shade-61, html.dark .map-cell.shade-62, html.dark .map-cell.shade-63, html.dark .map-cell.shade-64,
html.dark .map-cell.shade-65, html.dark .map-cell.shade-66, html.dark .map-cell.shade-67, html.dark .map-cell.shade-68, html.dark .map-cell.shade-69,
html.dark .map-cell.shade-70, html.dark .map-cell.shade-71, html.dark .map-cell.shade-72, html.dark .map-cell.shade-73, html.dark .map-cell.shade-74,
html.dark .map-cell.shade-75, html.dark .map-cell.shade-76, html.dark .map-cell.shade-77, html.dark .map-cell.shade-78, html.dark .map-cell.shade-79 { background: #4a8a2a; }
html.dark .map-cell.shade-80, html.dark .map-cell.shade-81, html.dark .map-cell.shade-82, html.dark .map-cell.shade-83, html.dark .map-cell.shade-84,
html.dark .map-cell.shade-85, html.dark .map-cell.shade-86, html.dark .map-cell.shade-87, html.dark .map-cell.shade-88, html.dark .map-cell.shade-89,
html.dark .map-cell.shade-90, html.dark .map-cell.shade-91, html.dark .map-cell.shade-92, html.dark .map-cell.shade-93, html.dark .map-cell.shade-94,
html.dark .map-cell.shade-95, html.dark .map-cell.shade-96, html.dark .map-cell.shade-97, html.dark .map-cell.shade-98, html.dark .map-cell.shade-99 { background: #3a7a1a; }
html.dark .map-cell.selected { outline: 2px solid #888; }
html.dark .map-info { color: #999; }
html.dark .target-line { color: #aaa; }
html.dark .ext-support-tag { color: #5cad5c; }
html.dark .action-buttons button { border-color: #555; }
html.dark .btn-attack { background: linear-gradient(135deg, #6a3a3a, #4a2a2a); color: #ddd !important; }
html.dark .btn-defend { background: linear-gradient(135deg, #3a5a3a, #2a4a2a); color: #ddd !important; }
html.dark .btn-transfer { background: linear-gradient(135deg, #5a5a2a, #4a4a1a); color: #ddd !important; }
html.dark .btn-spy { background: linear-gradient(135deg, #3a3a6a, #2a2a4a); color: #ddd !important; }
html.dark .btn-export { background: linear-gradient(135deg, #5a5a2a, #4a4a1a); color: #ddd !important; }
html.dark .btn-delete-reports { background: #6a2a2a; color: #ddd !important; border-color: #5a1a1a !important; }
html.dark .empty-state { color: #888; }
html.dark input[type=number], html.dark input[type=text], html.dark select, html.dark textarea { background: #333; color: #ccc; border-color: #555; }
html.dark input[type=number]:focus, html.dark input[type=text]:focus, html.dark select:focus, html.dark textarea:focus { border-color: #888; outline: none; }
html.dark button, html.dark .btn-secondary { background: #444; color: #ddd; border-color: #555; }
html.dark button:hover { background: #555; border-color: #777; }
html.dark .confirm-modal { background: #2a2a2a; border-color: #555; color: #ccc; }
html.dark .confirm-modal h3 { color: #eee; }
html.dark .confirm-troops th { background: #333; color: #ccc; }
html.dark .confirm-troops td { background: #2a2a2a; border-color: #444; }
html.dark .confirm-troops tr:nth-child(even) td { background: #303030; }
html.dark .confirm-troops tr.confirm-total td { background: #353535; }
html.dark .confirm-travel { color: #a89878; }
html.dark .confirm-compare { background: #2a2a2a; }
html.dark .admin-msg { background: #3a5a3a; color: #ddd; }
html.dark .admin-hint { color: #888; }
html.dark .admin-form-table td { color: #ccc; }
html.dark .admin-form-table td:last-child { color: #888; }
html.dark .admin-input { background: #333; color: #ccc; border-color: #555; }
html.dark .admin-btn { background: #444; color: #ddd; border-color: #555; }
html.dark .admin-btn:hover { background: #555; }
html.dark .admin-troop-summary { color: #ccc; }
html.dark .troop-line { color: #ccc; }
html.dark .troop-line-qty { color: #ff6b6b; }
html.dark .troop-line-stats { color: #d4a844; }
html.dark .battle-conquest { color: #b8942e; }
html.dark .battle-loot span { color: #8a8; }
html.dark .battle-loss { color: #e77; }
html.dark .battle-luck { color: #aaa; }
html.dark .battle-luck.good { color: #8a8; }
html.dark .battle-luck.bad { color: #e77; }
html.dark .battle-target { color: #ccc; }
html.dark .battle-owner { color: #999; }
html.dark .battle-dir { color: #999; }
html.dark .battle-report.won .battle-verdict { color: #8a8; }
html.dark .battle-report.lost .battle-verdict { color: #e77; }
html.dark .battle-col strong { color: #ddd; }
html.dark .battle-unit { background: #333; border-color: #555; }
html.dark .battle-loot { color: #cca040; }
html.dark .off-value { color: #d08060; }
html.dark .deff-value { color: #6090d0; }
html.dark .carry-value { color: #8ab850; }
html.dark .deff-effective { color: #50b080; border-color: #50b080; }
html.dark .section-header { color: #ddd; border-color: #444; }
html.dark .card-grid .card, html.dark .card-grid .research-item { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .card-grid .card:hover { background: #333; }
html.dark .build-costs { color: #aaa; }
html.dark .btn-secondary { border-color: #555; color: #ccc; }
html.dark .btn-secondary:hover { background: #444; }
html.dark .status-blocked { color: #c55; }
html.dark .option-group label { color: #ccc; }
html.dark ::-webkit-scrollbar-track { background: #2a2a2a; }
html.dark ::-webkit-scrollbar-thumb { background: #555; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #777; }
html.dark #map-tooltip { background: #2a2a2a; border-color: #555; color: #ccc; }
html.dark .tt-name { color: #eee; }
html.dark .tt-owner, html.dark .tt-travel, html.dark .tt-power { color: #aaa; }
html.dark .tt-move-out { color: #a88; }
html.dark .tt-move-in { color: #88a; }
html.dark .research-bonus-info { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .research-bonus-item { color: #ccc; }
html.dark .login-panel, html.dark .auth-form { background: #2a2a2a; border-color: #444; }
html.dark .auth-form h2 { color: #ddd; }
html.dark .auth-form label { color: #ccc; }
html.dark .auth-form input { background: #333; color: #ccc; border-color: #555; }
html.dark .msg-search-item { background: #2a2a2a; color: #ccc; border-color: #444; }
html.dark .msg-search-item:hover { background: #333; }
html.dark .msg-search-empty { color: #888; }
html.dark .options-msg { background: #3a5a3a; color: #ddd; padding: 8px 12px; border-radius: 3px; margin: 10px 0; }
html.dark .btn-reset { background: #6a2a2a; color: #ddd; border: 1px solid #8a3a3a; padding: 10px 24px; border-radius: 3px; cursor: pointer; font-size: 1em; }
html.dark .btn-reset:hover { background: #8a3a3a; }
html.dark .btn-donate { background: #2a5a2a; color: #ddd; border: 1px solid #3a7a3a; padding: 6px 16px; border-radius: 3px; cursor: pointer; font-size: 0.85em; }
html.dark .btn-donate:hover { background: #3a7a3a; }
html.dark .options-desc { color: #999; }
html.dark .theme-option { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .theme-option:hover { background: #333; }
html.dark .font-option { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark .font-option:hover { background: #333; }
html.dark .font-label { color: #ddd; }
html.dark .font-preview { color: #aaa; }
html.dark .theme-label { color: #ccc; }
html.dark .dash-section p, html.dark .dash-section div, html.dark .dash-section span { color: #ccc; }
html.dark .dash-build-name { color: #ddd; }
html.dark .level-badge { background: #3a3a3a; color: #cca040; }
html.dark .benefit-preview { color: #8a8; background: rgba(45,90,39,0.15); }
html.dark .costs li { background: rgba(255,255,255,0.06); }
html.dark .costs .insufficient { background: rgba(200,50,50,0.15); }
html.dark .costs-compact .build-time { color: #cca040; }
html.dark .building-card p, html.dark .research-card p, html.dark .building-card div, html.dark .research-card div { color: #ccc; }
html.dark .build-costs { color: #aaa; }
html.dark .build-costs span { color: #ccc; }
html.dark .queue-info p, html.dark .queue-info div, html.dark .queue-info span { color: #ccc; }
html.dark .movements-row, html.dark .movement-meta, html.dark .movement-target, html.dark .movement-section p, html.dark .movement-section div { color: #ccc; }
html.dark .movements-target strong { color: #ddd; }
html.dark .movements-units span { background: #333; border-color: #555; color: #ccc; }
html.dark .movements-loot { color: #aaa; }
html.dark .movements-eta { color: #cca040; }
html.dark .movement-section h4, html.dark .movements-section h3 { color: #ddd; }
html.dark .power-grid, html.dark .power-grid div, html.dark .power-grid span { color: #ccc; }
html.dark .power-label { color: #aaa; }
html.dark .power-stat { background: #2a2a2a; border-color: #444; }
html.dark .research-bonus-summary { background: #2a2a2a; border-color: #444; }
html.dark .research-bonus-summary h3 { color: #ddd; }
html.dark .research-bonus-item strong { color: #8a8; }
html.dark .section-card p, html.dark .section-card div, html.dark .section-card span { color: #ccc; }
html.dark .target-line, html.dark .target-line span { color: #ccc; }
html.dark .tt-name { color: #eee; }
html.dark .tt-owner, html.dark .tt-travel, html.dark .tt-power { color: #aaa; }
html.dark .research-bonus-item { color: #ccc; }
html.dark .research-bonus-info { background: #2a2a2a; border-color: #444; color: #ccc; }
html.dark #transfer-fields .res-input { background: #333; color: #ccc; border-color: #555; }
html.dark .settlement-form p, html.dark .settlement-form div, html.dark .settlement-form label { color: #ccc; }
html.dark .settlement-form input, html.dark .settlement-form select { background: #333; color: #ccc; border-color: #555; }
html.dark .rename-form input { background: #333; color: #ccc; border-color: #555; }
html.dark .msg-detail { background: #1e1e1e; border-color: #444; }
html.dark .msg-detail-subject { color: #ddd; }
html.dark .msg-detail-meta { color: #888; }
html.dark .msg-detail-body { background: #252525; border-color: #444; color: #f0f0f0; }
html.dark .msg-detail-body p, html.dark .msg-detail-body div { color: #f0f0f0; }
html.dark .msg-btn-small { background: #3a3a3a; border-color: #555; color: #ddd; }
html.dark .msg-btn-small:hover { background: #4a4a4a; }
html.dark .msg-btn-danger { background: #6b2020; border-color: #8b3a3a; color: #f0dbb5; }
html.dark .msg-btn-danger:hover { background: #8b2a2a; }
html.dark .msg-meta { color: #888; }
html.dark .login-panel p, html.dark .login-panel label, html.dark .auth-form p, html.dark .auth-form label { color: #ccc; }
html.dark .login-panel input, html.dark .auth-form input { background: #333; color: #ccc; border-color: #555; }
html.dark .admin-section h3, html.dark .admin-section h4 { color: #ddd; }
html.dark .admin-troop-summary { color: #ccc; }
html.dark .admin-form-table td { color: #ccc; }
html.dark .admin-form-table td:last-child { color: #888; }
html.dark .admin-input { background: #333; color: #ccc; border-color: #555; }
html.dark .admin-blessing-cols form { background: #2a2a2a; border-color: #444; }
html.dark .options-section h3 { color: #ddd; }

/* Catch-all for any remaining dark text */
html.dark .dash-cols p, html.dark .dash-cols div, html.dark .dash-cols span,
html.dark .card-grid p, html.dark .card-grid div, html.dark .card-grid span,
html.dark .dash-buildings p, html.dark .dash-buildings div, html.dark .dash-buildings span,
html.dark .section-card p, html.dark .section-card div, html.dark .section-card span { color: #ccc; }
html.dark .movement-summary { background: #2a2a2a; border-color: #444; }
html.dark .movement-summary h3, html.dark .movement-summary h4 { color: #ddd; }
html.dark .movement-summary p, html.dark .movement-summary div { color: #ccc; }
html.dark .movement-stats .stat { background: #333; border-color: #555; color: #ccc; }
html.dark .movement-stats .stat.attack-out { color: #e77; }
html.dark .movement-stats .stat.attack-in { color: #cca040; }

/* Catch-all light backgrounds → dark */
html.dark .building-card, html.dark .research-card,
html.dark .stat-card, html.dark .admin-col,
html.dark .options-section, html.dark .theme-option,
html.dark .confirm-modal,
html.dark .msg-compose, html.dark .msg-row,
html.dark .msg-row.unread,
html.dark .msg-tab.active,
html.dark .msg-search-item,
html.dark .unit-costs,
html.dark .battle-report.spy-report.lost summary,
html.dark .dash-build-level,
html.dark .admin-table tr:nth-child(even) td,
html.dark .admin-table tr:hover td,
html.dark .confirm-troops tr:nth-child(even) td,
html.dark .admin-input { background: #2a2a2a; }
html.dark .admin-table tr:nth-child(even) td { background: #303030; }
html.dark .admin-table tr:hover td { background: #3a3a3a; }
html.dark .confirm-troops tr:nth-child(even) td { background: #303030; }
html.dark .msg-row:hover { background: #333; }
html.dark .msg-row.unread { background: #2a2a3a; border-left-color: #8b0000; }
html.dark .msg-del-btn { color: #c77; }
html.dark .msg-del-btn:hover { background: #3a2a2a; }
html.dark .msg-tab.active { background: #3a3a3a; border-color: #555; color: #ddd; }
html.dark .msg-search-item { border-color: #444; }
html.dark .msg-search-item:hover { background: #333; }
html.dark .dash-build-card { background: #2a2a2a; border-color: #444; }
html.dark .dash-build-level { background: #3a3a3a; color: #aaa; }

/* Button gradients */
html.dark .btn-attack { background: linear-gradient(135deg, #6a3a3a, #4a2a2a); color: #ddd !important; }
html.dark .btn-defend { background: linear-gradient(135deg, #3a5a3a, #2a4a2a); color: #ddd !important; }
html.dark .btn-transfer { background: linear-gradient(135deg, #5a5a2a, #4a4a1a); color: #ddd !important; }
html.dark .btn-spy { background: linear-gradient(135deg, #3a3a6a, #2a2a4a); color: #ddd !important; }
html.dark .btn-export { background: linear-gradient(135deg, #5a5a2a, #4a4a1a); color: #ddd !important; }
html.dark .btn-delete-reports { background: #6a2a2a; color: #ddd !important; }
html.dark .btn-confirm { background: #3a6a3a; color: #ddd; }
html.dark .btn-cancel { background: #6a2a2a; color: #ddd; }
html.dark .btn-secondary { background: #444; color: #ddd; border-color: #555; }
html.dark .btn-secondary:hover { background: #555; }
html.dark .btn-max { background: #444; border-color: #555; color: #ccc; }
html.dark .btn-max:hover { background: #555; }
.error-msg { background: #8b3a3a; color: #fff; padding: 8px 14px; border-radius: 3px; margin: 10px 0; font-size: 0.9em; }
html.dark .error-msg { background: #6a2a2a; color: #ddd; }
.success-msg { background: #4a8c3f; color: #fff; padding: 8px 14px; border-radius: 3px; margin: 10px 0; font-size: 0.9em; }
html.dark .success-msg { background: #3a5a3a; color: #ddd; }

/* Market / Trading */
.market-page { max-width: 700px; }
.market-desc { color: #6b5a3a; font-size: 0.9em; margin-bottom: 15px; }
.trade-form { background: linear-gradient(135deg, #f0e0c0 0%, #e8d5a3 100%); border: 1px solid #c4a878; border-radius: 3px; padding: 15px; }
.trade-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.trade-col { display: flex; flex-direction: column; gap: 4px; }
.trade-col label { font-size: 0.8em; color: #6b5a3a; }
.trade-select, .trade-input { padding: 6px 10px; border: 1px solid #c4a878; border-radius: 2px; background: #fcf3e0; color: #3a2512; font-size: 0.9em; }
.trade-input { width: 100px; }
.trade-arrow { font-size: 1.5em; color: #8b6914; padding-bottom: 6px; align-self: center; }
.trade-info { font-size: 0.85em; color: #6b5a3a; }
.trade-fee { display: block; }
.trade-receive { display: block; font-weight: bold; color: #3a2512; }
.trade-btn { background: linear-gradient(135deg, #d4a844 0%, #b8860b 100%); color: #2c1810; border: 1px solid #8b6914; padding: 8px 20px; border-radius: 3px; cursor: pointer; font-size: 0.95em; white-space: nowrap; }
.trade-btn:hover { background: linear-gradient(135deg, #c49834 0%, #a8760a 100%); }
.trade-rates { margin-top: 15px; padding: 10px 14px; background: #fcf3e0; border: 1px solid #d4c094; border-radius: 3px; }
.trade-rates h3 { font-size: 0.95em; margin-bottom: 4px; }
.trade-rates p { font-size: 0.85em; color: #6b5a3a; }
html.dark .trade-form { background: #2a2a2a; border-color: #444; }
html.dark .trade-select, html.dark .trade-input { background: #333; border-color: #555; color: #ccc; }
html.dark .trade-btn { background: linear-gradient(135deg, #5a5a2a, #4a4a1a); color: #ddd; }
html.dark .trade-rates { background: #2a2a2a; border-color: #444; }
html.dark .market-desc, html.dark .trade-fee, html.dark .trade-col label, html.dark .trade-rates p { color: #aaa; }
html.dark .trade-receive, html.dark .trade-rates h3 { color: #ddd; }
html.dark .trade-arrow { color: #cca040; }
.players-page { max-width: 800px; }
.players-intro { color: #6b5a3a; font-size: 0.95em; margin-bottom: 20px; }
.players-table { width: 100%; border-collapse: collapse; background: #f9f0dc; border: 1px solid #d4c094; border-radius: 3px; overflow: hidden; }
.players-table th { background: #d4c094; color: #3a2a1a; padding: 10px 12px; text-align: left; font-size: 0.9em; }
.players-table td { padding: 8px 12px; border-top: 1px solid #efe0c0; color: #3a2a1a; font-size: 0.9em; }
.players-table .p-name { font-weight: bold; }
.players-table .p-name .user-title { color: #8b6914; font-weight: normal; font-size: 0.85em; margin-left: 6px; }
.players-table .p-points { font-variant-numeric: tabular-nums; text-align: right; }
.players-table .p-villages { text-align: center; }
.players-table .p-pos a { color: #6b3a1a; text-decoration: none; }
.players-table .p-pos a:hover { text-decoration: underline; }
.players-table .p-active { color: #6b5a3a; font-size: 0.85em; }
.players-table .p-empty { text-align: center; color: #6b5a3a; padding: 30px; }
.players-table tr:hover td { background: #f5ecdc; }
html.dark .players-intro { color: #999; }
html.dark .players-table { background: #2a2a2a; border-color: #444; }
html.dark .players-table th { background: #3a3a3a; color: #ddd; }
html.dark .players-table td { color: #ccc; border-top-color: #3a3a3a; }
html.dark .players-table .p-pos a { color: #a07a50; }
html.dark .players-table .p-active { color: #888; }
html.dark .players-table .p-empty { color: #888; }
html.dark .players-table tr:hover td { background: #333; }

/* --- Toast-Benachrichtigungen --- */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 12px 20px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-in 0.35s ease forwards;
    max-width: 380px;
    word-break: break-word;
    cursor: pointer;
}
.toast.toast-out {
    animation: toast-out 0.3s ease forwards;
}
.toast-success { background: #2a7a3a; border-left: 4px solid #4caf50; }
.toast-error   { background: #7a2a2a; border-left: 4px solid #f44336; }
.toast-info    { background: #2a5a7a; border-left: 4px solid #42a5f5; }
.toast-warning { background: #7a6a2a; border-left: 4px solid #ffa726; }
.toast-icon { font-size: 1.2em; flex-shrink: 0; }
.toast-msg  { flex: 1; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(60px); }
}

html.dark .toast { box-shadow: 0 4px 14px rgba(0,0,0,0.6); }

/* Market - aktive Trades */
.trade-active {
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.trade-active h3 {
    font-size: 0.95em;
    margin: 0 0 6px;
    color: #6b4a1a;
}
.trade-active-list { list-style: none; padding: 0; margin: 0; }
.trade-active-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.9em;
    border-bottom: 1px solid #e8dcc0;
}
.trade-active-list li:last-child { border-bottom: none; }
.trade-active-arrow { color: #8b6914; font-weight: bold; }
.trade-active-time { color: #6a5a3a; font-size: 0.85em; margin-left: auto; }

html.dark .trade-active { background: #2a2a2a; border-color: #555; }
html.dark .trade-active h3 { color: #d4b040; }
html.dark .trade-active-list li { border-color: #444; }
html.dark .trade-active-time { color: #9a8a6a; }

/* Diplomatie */
.diplomacy-page { max-width: 700px; }
.dip-section {
    background: #fcf3e0;
    border: 1px solid #b8966a;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 14px;
}
.dip-section h3 {
    font-size: 1em;
    margin: 0 0 10px;
    color: #6b4a1a;
    border-bottom: 1px solid #e8dcc0;
    padding-bottom: 6px;
}
.dip-search-form { display: flex; gap: 6px; margin-bottom: 8px; }
.dip-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #b8966a;
    border-radius: 3px;
    font-size: 0.9em;
    background: #fff;
    color: #3a2a1a;
}
.dip-btn {
    padding: 6px 14px;
    border: 1px solid #8b6914;
    border-radius: 3px;
    background: linear-gradient(135deg, #d4b040 0%, #b89420 100%);
    color: #000;
    font-size: 0.85em;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.dip-btn:hover { background: linear-gradient(135deg, #e0c050 0%, #c8a428 100%); }
.dip-btn-small { padding: 4px 10px; font-size: 0.8em; }
.dip-btn-accept { background: linear-gradient(135deg, #4a8c3f 0%, #35752b 100%); color: #fff; border-color: #2d6a22; }
.dip-btn-accept:hover { background: linear-gradient(135deg, #5a9c4f 0%, #45853b 100%); }
.dip-btn-decline { background: linear-gradient(135deg, #8b3030 0%, #6b2020 100%); color: #fff; border-color: #5a1818; }
.dip-btn-decline:hover { background: linear-gradient(135deg, #9b4040 0%, #7b3030 100%); }
.dip-inline-form { display: inline; }
.dip-search-results, .dip-request-list, .dip-friend-list { list-style: none; padding: 0; margin: 0; }
.dip-search-results li, .dip-request-list li, .dip-friend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #e8dcc0;
    font-size: 0.9em;
    flex-wrap: wrap;
}
.dip-search-results li:last-child, .dip-request-list li:last-child, .dip-friend-list li:last-child { border-bottom: none; }
.dip-player-name { font-weight: bold; color: #3a2a1a; }
.dip-date { color: #8a7a5a; font-size: 0.85em; }
.dip-empty { color: #8a7a5a; font-size: 0.9em; font-style: italic; }
.dip-badge {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
}
.dip-badge-friend { background: #4a8c3f; color: #fff; }
.dip-badge-pending { background: #b89420; color: #fff; }
.dip-request-actions { display: flex; gap: 4px; margin-left: auto; }

html.dark .dip-section { background: #2a2a2a; border-color: #555; }
html.dark .dip-btn { color: #000; }
html.dark .dip-btn-accept { color: #fff !important; }
html.dark .dip-btn-decline { color: #fff !important; }
html.dark .dip-section h3 { color: #d4b040; border-color: #444; }
html.dark .dip-search-results li, html.dark .dip-request-list li, html.dark .dip-friend-list li { border-color: #444; }
html.dark .dip-player-name { color: #e0d0b0; }
html.dark .dip-date { color: #8a7a6a; }
html.dark .dip-empty { color: #8a7a6a; }
html.dark .dip-search-input { background: #1a1a1a; color: #e0d0b0; border-color: #555; }
.dip-btn-enemy { border-color: #8b3030 !important; color: #8b3030 !important; }
.dip-btn-enemy:hover { background: linear-gradient(135deg, #8b3030 0%, #6b2020 100%) !important; color: #fff !important; }
.dip-search-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.dip-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dip-column { background: #fcf3e0; border: 1px solid #b8966a; border-radius: 4px; padding: 14px; }
.dip-column h3 { font-size: 1em; margin: 0 0 10px; color: #6b4a1a; border-bottom: 1px solid #e8dcc0; padding-bottom: 6px; }
html.dark .dip-column { background: #2a2a2a; border-color: #555; }
html.dark .dip-column h3 { color: #d4b040; border-color: #444; }
@media (max-width: 700px) { .dip-columns { grid-template-columns: 1fr; } }

/* === Shop === */
.shop-page { max-width: 800px; margin: 0 auto; }
.shop-balance { background: #fcf3e0; border: 1px solid #b8966a; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.shop-balance h3 { margin: 0 0 8px; font-size: 1em; color: #6b4a1a; }
.shop-balance-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.shop-balance-item { min-width: 120px; }
.shop-balance-label { color: #8b7355; }
.shop-balance-value { font-weight: bold; color: #3a2512; }
.shop-balance-hint { margin: 8px 0 0; font-size: 0.85em; color: #8b7355; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shop-card { background: #fcf3e0; border: 1px solid #b8966a; border-radius: 4px; padding: 12px; }
.shop-card.owned { opacity: 0.6; border-color: #6a8a5a; }
.shop-card.active { border-color: #4a8a3a; }
.shop-card-name { font-weight: bold; color: #3a2512; font-size: 1.05em; }
.shop-card-desc { font-size: 0.85em; color: #6b5a3a; margin: 4px 0; }
.shop-card-cost { font-size: 0.85em; color: #8b7355; margin-bottom: 8px; }
.shop-cost-lacking { color: #b33; }
.shop-card-status { font-weight: bold; font-size: 0.9em; }
.shop-card-status.owned { color: #4a7a3a; }
.shop-card-status.active { color: #2d6a1a; }
.shop-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.shop-table th { text-align: left; padding: 8px 8px; border-bottom: 1px solid #c4a878; color: #6b4a1a; font-size: 0.9em; }
.shop-table th:last-child { text-align: center; }
.shop-row td { padding: 4px 6px; border-bottom: 1px solid #e8dcc0; vertical-align: middle; }
.shop-row.owned { opacity: 0.55; }
.shop-row.active { background: #e8f5e0; }
.shop-row-name strong { font-size: 0.95em; color: #3a2512; }
.shop-row-desc { font-size: 0.8em; color: #6b5a3a; margin-top: 0; line-height: 1.3; }
.shop-row-cost { font-size: 0.85em; color: #8b7355; }
.shop-row-action { text-align: center; white-space: nowrap; }
.shop-row-status { font-weight: bold; font-size: 0.9em; display: block; padding: 4px 0; }
.shop-row-status.owned { color: #4a7a3a; }
.shop-row-status.active { color: #2d6a1a; }
.shop-btn { background: linear-gradient(135deg, #8b6b3a 0%, #6b4a1a 100%); color: #fff; border: none; padding: 6px 14px; border-radius: 3px; cursor: pointer; }
.shop-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-btn-activate { background: linear-gradient(135deg, #3a7a3a 0%, #2a5a2a 100%); }
.shop-btn-activate:hover { background: linear-gradient(135deg, #4a8a4a 0%, #3a6a3a 100%); }
.shop-custom-title { background: #e8f0d8; border: 1px solid #8aaa6a; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.shop-custom-title h3 { margin: 0 0 8px; font-size: 1em; }
.custom-title-form { display: flex; gap: 8px; }
.shop-input { flex: 1; padding: 6px; border: 1px solid #b8966a; border-radius: 3px; background: #fff; color: #3a2512; }
.shop-active-boost { background: #e0f0d8; border: 1px solid #8aaa6a; border-radius: 3px; padding: 8px; margin-bottom: 6px; display: flex; justify-content: space-between; }
.shop-boost-timer { font-family: monospace; color: #4a7a3a; }
.shop-items h3 { margin: 14px 0 8px; font-size: 1em; color: #6b4a1a; }
html.dark .shop-balance { background: #2a2a2a; border-color: #555; }
html.dark .shop-balance h3 { color: #d4b040; }
html.dark .shop-balance-value { color: #e0d0b0; }
html.dark .shop-card { background: #2a2a2a; border-color: #555; }
html.dark .shop-card-name { color: #e0d0b0; }
html.dark .shop-card-desc { color: #aaa; }
html.dark .shop-input { background: #1a1a1a; color: #e0d0b0; border-color: #555; }
html.dark .shop-table th { color: #d4b040; border-color: #555; }
html.dark .shop-row td { border-color: #444; }
html.dark .shop-row-name strong { color: #e0d0b0; }
html.dark .shop-row-desc { color: #aaa; }
html.dark .shop-row-cost { color: #999; }
html.dark .shop-row.active { background: #2a3a2a; }

/* === Einlagern (Markt) === */
.store-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #d4c094; }
.store-section h3 { margin: 0 0 6px; font-size: 1em; color: #6b4a1a; }
.store-info { font-size: 0.85em; color: #6b5a3a; margin: 0 0 8px; }
.store-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.store-btn { background: linear-gradient(135deg, #3a7a3a 0%, #2a5a2a 100%); }
.store-btn:hover { background: linear-gradient(135deg, #4a8a4a 0%, #3a6a3a 100%); }
html.dark .store-section h3 { color: #d4b040; }

/* === Wohnstätte Lv.30 Aktivierung === */
.shop-activate-page { max-width: 600px; margin: 0 auto; }
.shop-activate-desc { color: #6b5a3a; font-size: 0.9em; margin-bottom: 16px; line-height: 1.5; }
.shop-activate-form { background: #fcf3e0; border: 1px solid #b8966a; border-radius: 4px; padding: 16px; }
.shop-activate-villages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.shop-activate-village { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e8dcc0; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.shop-activate-village:hover { background: #f0e8d0; }
.shop-activate-village input[type="radio"] { accent-color: #6b4a1a; }
.shop-activate-vname { font-weight: bold; color: #3a2512; }
.shop-activate-vcoord { color: #8b7355; font-size: 0.85em; }
.shop-btn-cancel { background: #888; display: inline-block; }
.shop-btn-cancel:hover { background: #999; }
html.dark .shop-activate-form { background: #2a2a2a; border-color: #555; }
html.dark .shop-activate-desc { color: #aaa; }
html.dark .shop-activate-village { border-color: #444; }
html.dark .shop-activate-village:hover { background: #333; }
html.dark .shop-activate-vname { color: #e0d0b0; }
html.dark .shop-activate-vcoord { color: #999; }