/* ========================================
   Die Stämme Style - Tribal Wars Theme
   ======================================== */

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

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: Georgia, 'Times New Roman', serif;
    background: linear-gradient(135deg, #2a2520 0%, #3d3630 50%, #2a2520 100%);
    background-attachment: fixed;
    color: #d4af37;
    line-height: 1.6;
}

/* ========== NAVIGATION ========== */
.sticky-navigation-shell {
    display: contents;
    position: static;
    width: 100%;
}

.navbar {
    background: linear-gradient(to bottom, #1a1410, #2a2520);
    border-bottom: 3px solid #d4af37;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-content {
    max-width: 1440px;
    min-height: 54px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    position: relative;
}

.navbar-brand {
    flex: 0 0 auto;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(19px, 1.55vw, 22px);
    font-weight: bold;
    color: #d4af37;
    text-decoration: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.navbar-brand:hover {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.navbar-menu {
    min-width: 0;
    max-width: calc(100% - 300px);
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
    gap: clamp(3px, 0.42vw, 6px);
    align-items: center;
}

.navbar-menu > li {
    flex: 0 0 auto;
}

.navbar-menu a {
    color: #d4af37;
    text-decoration: none;
    font-size: clamp(10px, 0.78vw, 11px);
    font-weight: bold;
    line-height: 1.2;
    padding: 6px clamp(5px, 0.5vw, 7px);
    border: 1px solid transparent;
    border-radius: 3px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.navbar-menu a:hover {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid #d4af37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.navbar-menu a.active {
    background: #d4af37;
    color: #1a1410;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.navbar-logout-button {
    margin: 0;
    padding: 6px 7px;
    border: 1px solid #d4af37;
    border-radius: 3px;
    background: transparent;
    color: #d4af37;
    font: bold 10px/1.2 Georgia, 'Times New Roman', serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.navbar-logout-button:hover,
.navbar-logout-button:focus-visible {
    background: rgba(212, 175, 55, 0.1);
    color: #ffd700;
    box-shadow: none;
    outline: none;
    transform: none;
}


/* ========== RESSOURCENLEISTE ========== */
.resource-bar {
    display: block;
    width: 100%;
    clear: both;
    background: linear-gradient(to bottom, #2a2520, #1a1410);
    border-bottom: 2px solid #8b7355;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);
    position: relative;
    top: auto;
    z-index: 1;
}

.resource-bar-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 7px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.resource-item {
    min-width: 96px;
    min-height: 30px;
    padding: 5px 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    border: 1px solid #8b7355;
    border-radius: 3px;
    color: #c0c0c0;
    font-size: 12px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
}

.resource-icon {
    font-size: 13px;
    line-height: 1;
}

.resource-name {
    color: #b8860b;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-size: 10px;
}

.resource-item-population {
    min-width: 126px;
}


.resource-value-population {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.resource-value-capped {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.resource-item strong {
    color: #ffd700;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.resource-value-updated {
    color: #fff2a8 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.95) !important;
    transform: scale(1.08);
}

/* ========== HEADER & MAIN ========== */
.site-hero {
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0.05), rgba(0, 0, 0, 0.3));
    border-bottom: 2px solid #d4af37;
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0;
}

.site-hero h1 {
    font-size: 48px;
    color: #ffd700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.site-hero p {
    color: #b8860b;
    font-style: italic;
    font-size: 16px;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== CONTAINER ========== */
.container {
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    border: 2px solid #d4af37;
    border-radius: 4px;
    padding: 30px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.9);
    margin-bottom: 30px;
}

.container h2 {
    color: #ffd700;
    font-size: 32px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #d4af37;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ========== FORM ELEMENTS ========== */
form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    color: #d4af37;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #8b7355;
    background: #1a1410;
    color: #d4af37;
    font-family: Georgia, serif;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    background: #2a2520;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
    color: #666;
}

/* ========== BUTTONS ========== */
button,
.btn {
    padding: 12px 30px;
    border: 2px solid #d4af37;
    background: linear-gradient(to bottom, #d4af37, #b8860b);
    color: #1a1410;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    font-family: Georgia, serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

button:hover,
.btn:hover {
    background: linear-gradient(to bottom, #ffd700, #d4af37);
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

button:active,
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-secondary {
    background: linear-gradient(to bottom, #666, #333);
    border-color: #999;
    color: #d4af37;
}

.btn-secondary:hover {
    background: linear-gradient(to bottom, #888, #444);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* ========== MESSAGES ========== */
.message,
.success {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border-radius: 3px;
}

.error,
.errors {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    color: #ff6b6b;
    border-radius: 3px;
}

.notice {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 5px solid #d4af37;
    background: rgba(212, 175, 55, 0.1);
    color: #ead78a;
    border-radius: 3px;
}

.errors ul {
    margin-left: 20px;
    margin-top: 10px;
}

.errors li {
    margin-bottom: 5px;
}

/* ========== LINKS ========== */
a {
    color: #d4af37;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: #ffd700;
    border-bottom: 1px solid #ffd700;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

/* ========== SEARCH ========== */
.search-container {
    position: relative;
    margin-bottom: 30px;
}

.search-box {
    display: flex;
    gap: 10px;
}

.search-box input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #8b7355;
    background: #1a1410;
    color: #d4af37;
    font-family: Georgia, serif;
    font-size: 14px;
    border-radius: 3px;
}

.search-box input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2520;
    border: 2px solid #d4af37;
    border-top: none;
    border-radius: 0 0 3px 3px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
}

.search-results.active {
    display: block;
}

.search-result-item {
    display: block;
    padding: 10px 15px;
    color: inherit;
    border-bottom: 1px solid #3d3630;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(212, 175, 55, 0.15);
    padding-left: 20px;
}

/* ========== GRID LAYOUT ========== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.grid-item {
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    border: 2px solid #d4af37;
    padding: 20px;
    border-radius: 3px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(212, 175, 55, 0.3);
}

.grid-item h3 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 20px;
}

.grid-item p {
    color: #c0c0c0;
    font-size: 14px;
}

/* ========== FOOTER ========== */
footer {
    background: linear-gradient(to top, #1a1410, #2a2520);
    border-top: 3px solid #d4af37;
    padding: 30px 20px;
    margin-top: 0;
    text-align: center;
    color: #b8860b;
}

footer p {
    margin-bottom: 10px;
}

footer a {
    color: #d4af37;
}

/* ========== AUTH FORMS ========== */
.auth-container {
    max-width: 500px;
    margin: 60px auto;
}

.auth-form {
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    border: 3px solid #d4af37;
    padding: 40px;
    border-radius: 4px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 12px 30px rgba(0, 0, 0, 0.9);
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 30px;
}

.auth-form .form-group {
    margin-bottom: 25px;
}

.auth-links {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #8b7355;
    text-align: center;
}

.auth-links p {
    color: #b8860b;
    margin-bottom: 10px;
}

.auth-links a {
    color: #d4af37;
    font-weight: bold;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .resource-bar-content {
        gap: 8px;
        padding: 8px 10px;
    }

    .resource-item {
        min-width: calc(50% - 8px);
        font-size: 12px;
    }

    .navbar-menu {
        gap: 10px;
        font-size: 12px;
    }

    header h1 {
        font-size: 32px;
    }

    .container {
        padding: 20px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .village-layout {
        grid-template-columns: 1fr;
    }

    .village-map {
        min-height: 620px;
    }

    .village-plot-large,
    .village-plot-medium,
    .village-plot-small {
        width: 112px;
    }

    .village-building,
    .village-empty-plot {
        min-height: 78px;
        padding: 7px;
    }

    .auth-form {
        padding: 25px;
        margin: 30px 10px;
    }
}

/* ========== DASHBOARD ========== */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #d4af37;
}

.user-info {
    color: #d4af37;
}

.user-info p {
    margin-bottom: 5px;
}

.dashboard-section {
    margin-bottom: 30px;
}

.stat-box {
    background: linear-gradient(135deg, #d4af37, #b8860b);
    color: #1a1410;
    padding: 25px;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
}

.stat-box h3 {
    font-size: 32px;
    margin-bottom: 5px;
    color: #1a1410;
}

.stat-box p {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== VILLAGE ========== */
.village-page .dashboard-header h2 {
    margin-bottom: 8px;
}

.village-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 28px;
}

.village-map {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 46%, rgba(170, 132, 66, 0.55) 0 9%, transparent 10%),
        linear-gradient(135deg, #4f6b34 0%, #6f7c3e 43%, #7a6539 44%, #5f5636 100%);
    border: 2px solid #d4af37;
    border-radius: 4px;
    box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.65), 0 8px 18px rgba(0, 0, 0, 0.65);
}

.village-ground,
.village-road,
.village-stream {
    position: absolute;
    pointer-events: none;
}

.village-ground-forest {
    left: -8%;
    top: -14%;
    width: 45%;
    height: 62%;
    background: radial-gradient(circle, rgba(35, 86, 42, 0.95) 0 16%, transparent 17% 100%);
    background-size: 42px 42px;
    opacity: 0.8;
    transform: rotate(-8deg);
}

.village-ground-mountain {
    right: -7%;
    top: -8%;
    width: 42%;
    height: 48%;
    background: linear-gradient(145deg, rgba(78, 76, 70, 0.95), rgba(36, 34, 31, 0.75));
    clip-path: polygon(18% 84%, 42% 18%, 58% 64%, 73% 28%, 96% 90%);
}

.village-ground-fields {
    left: 16%;
    bottom: -8%;
    width: 45%;
    height: 30%;
    background: repeating-linear-gradient(90deg, rgba(149, 117, 50, 0.7) 0 18px, rgba(89, 112, 45, 0.7) 18px 36px);
    border-top: 2px solid rgba(95, 72, 34, 0.75);
    transform: rotate(-5deg);
}

.village-road {
    background: rgba(135, 104, 62, 0.78);
    box-shadow: 0 0 0 6px rgba(75, 54, 32, 0.18);
}

.village-road-main {
    left: 47%;
    top: -12%;
    width: 7%;
    height: 126%;
    transform: rotate(18deg);
}

.village-road-cross {
    left: 8%;
    top: 48%;
    width: 84%;
    height: 7%;
    transform: rotate(-9deg);
}

.village-stream {
    left: -10%;
    bottom: 12%;
    width: 120%;
    height: 26%;
    border-top: 12px solid rgba(69, 111, 139, 0.72);
    border-radius: 50%;
    transform: rotate(8deg);
}

.village-plot {
    position: absolute;
    left: var(--plot-x);
    top: var(--plot-y);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.village-plot-large {
    width: 152px;
}

.village-plot-medium {
    width: 138px;
}

.village-plot-small {
    width: 120px;
}

.village-building-form {
    display: block;
}

.village-building,
.village-empty-plot {
    width: 100%;
    min-height: 86px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

.village-building {
    background: linear-gradient(to bottom, #6f5330, #342315);
    border: 2px solid #e0bd5b;
    color: #fff0b6;
    box-shadow: 0 7px 12px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(255, 215, 0, 0.12);
}

.village-building:hover {
    background: linear-gradient(to bottom, #8b6738, #4a2e17);
}

.village-building-icon {
    font-size: 24px;
    line-height: 1;
}

.village-building-name {
    font-size: 13px;
    color: #fff2bd;
}

.village-building-level {
    padding: 2px 6px;
    background: rgba(26, 20, 16, 0.68);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 3px;
    color: #ffd700;
    font-size: 11px;
}

.village-empty-plot {
    background: rgba(37, 31, 25, 0.76);
    border: 2px dashed rgba(212, 175, 55, 0.74);
    color: #d4af37;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.village-empty-plot strong {
    color: #ffd700;
    font-size: 13px;
}

.village-empty-plot-locked {
    opacity: 0.72;
    border-color: rgba(192, 192, 192, 0.45);
    color: #c0c0c0;
}

.village-side {
    padding: 20px;
    background: linear-gradient(to bottom, #342d27, #241f1a);
    border: 1px solid #8b7355;
    border-radius: 4px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
}

.village-side h3 {
    color: #ffd700;
    margin-bottom: 12px;
}

.village-legend {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    color: #c0c0c0;
    font-size: 14px;
}

.village-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.village-legend i {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 3px;
}

.legend-built {
    background: #6f5330;
    border: 1px solid #e0bd5b;
}

.legend-empty {
    background: #251f19;
    border: 1px dashed #d4af37;
}

.legend-locked {
    background: #2a2520;
    border: 1px dashed #888;
}

.village-build-list {
    margin-top: 12px;
}

.village-grid-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 28px;
}

.village-build-panel {
    padding: 18px;
    background: linear-gradient(to bottom, #342d27, #241f1a);
    border: 1px solid #8b7355;
    border-radius: 4px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
}

.village-build-panel h3 {
    color: #ffd700;
    margin-bottom: 14px;
}

.village-build-options {
    display: grid;
    gap: 10px;
}

.village-build-option {
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    color: #d4af37;
    border: 1px solid #8b7355;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
}

.village-build-option:hover,
.village-build-option.is-selected {
    background: linear-gradient(to bottom, #6f5330, #342315);
    border-color: #ffd700;
    color: #fff2bd;
}

.village-build-option-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    background: #1a1410;
    border: 1px solid #8b7355;
    border-radius: 3px;
    font-size: 20px;
}

.village-build-option small {
    display: block;
    margin-top: 2px;
    color: #c0c0c0;
    font-size: 11px;
}

.village-grid-board-wrap {
    overflow: auto;
    padding: 14px;
    background: linear-gradient(to bottom, #1a1410, #2a2520);
    border: 2px solid #d4af37;
    border-radius: 4px;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.65);
}

.village-grid-board {
    width: calc(var(--village-cols) * 50px);
    min-width: calc(var(--village-cols) * 50px);
    display: grid;
    grid-template-columns: repeat(var(--village-cols), 50px);
    grid-auto-rows: 50px;
    background:
        linear-gradient(rgba(212, 175, 55, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.22) 1px, transparent 1px),
        linear-gradient(135deg, #506834, #72653a);
    background-size: 50px 50px, 50px 50px, auto;
    border: 1px solid #8b7355;
}

.village-grid-cell-form {
    display: block;
    width: 50px;
    height: 50px;
}

.village-grid-cell {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid rgba(77, 58, 34, 0.75);
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

.village-grid-cell-empty {
    background: rgba(83, 111, 52, 0.38);
}

.village-grid-cell-empty:hover {
    background: rgba(212, 175, 55, 0.24);
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.65);
    transform: none;
}

.village-grid-cell-built {
    background: linear-gradient(to bottom, #7c5830, #392516);
    border-color: #e0bd5b;
    color: #fff2bd;
    box-shadow: inset 0 0 9px rgba(255, 215, 0, 0.16);
}

.village-grid-cell-built:hover {
    background: linear-gradient(to bottom, #96703f, #4a2e17);
    transform: none;
}

.village-grid-building-icon {
    font-size: 22px;
    line-height: 1;
}

.village-grid-building-level {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 16px;
    padding: 1px 3px;
    background: rgba(26, 20, 16, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 2px;
    color: #ffd700;
    font-size: 10px;
    line-height: 1.1;
}

.classic-village-page {
    max-width: 1220px;
    margin: 0 auto 30px;
}

.classic-village-shell {
    display: grid;
    grid-template-columns: 155px minmax(520px, 1fr) 220px;
    gap: 8px;
    align-items: start;
    color: #2a1b0f;
}

.classic-panel,
.classic-village-main {
    background: #d9bd78;
    border: 2px solid #7d5526;
    box-shadow: inset 0 0 0 1px #f2df9d, 0 2px 8px rgba(0, 0, 0, 0.55);
}

.classic-panel-title,
.classic-village-topbar {
    min-height: 27px;
    padding: 5px 8px;
    background: linear-gradient(to bottom, #f0dc95, #b78943);
    border-bottom: 1px solid #7d5526;
    color: #2c1a0b;
    font-size: 13px;
    font-weight: bold;
}

.classic-building-list {
    padding: 5px;
    display: grid;
    gap: 5px;
}

.classic-building-row,
.classic-map-building {
    display: block;
}

.classic-building-row button {
    width: 100%;
    min-height: 54px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ead08b;
    border: 1px solid #8b6232;
    border-radius: 0;
    color: #2a1b0f;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 220, 0.45);
}

.classic-building-row button:hover {
    background: #f7df9b;
    transform: none;
}

.classic-building-thumb {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    background: linear-gradient(to bottom, #6d7e45, #3f4f2c);
    border: 1px solid #5c3d1f;
    font-size: 22px;
}

.classic-building-meta strong,
.classic-building-meta small {
    display: block;
}

.classic-building-meta strong {
    font-size: 12px;
}

.classic-building-meta small {
    color: #6d3d18;
    font-size: 11px;
}

.classic-village-topbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.classic-village-topbar a {
    color: #4d260c;
    border-bottom-color: transparent;
}

.classic-village-map {
    position: relative;
    height: 490px;
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 48%, rgba(215, 182, 95, 0.95) 0 26%, rgba(177, 145, 75, 0.92) 27% 36%, transparent 37%),
        linear-gradient(135deg, #7d9a45 0%, #a6b462 33%, #d2b45d 34%, #d2b45d 66%, #8a9f4c 67%, #607b38 100%);
}

.classic-map-grass {
    position: absolute;
    background: radial-gradient(circle, rgba(64, 105, 44, 0.85) 0 14%, transparent 15%);
    background-size: 28px 28px;
    opacity: 0.7;
}

.classic-map-grass-left {
    left: -6%;
    top: 0;
    width: 34%;
    height: 100%;
}

.classic-map-grass-right {
    right: -5%;
    top: 0;
    width: 32%;
    height: 100%;
}

.classic-map-wall {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 10%;
    bottom: 10%;
    border: 13px solid #6a4120;
    border-radius: 48% 45% 46% 43%;
    box-shadow: inset 0 0 0 3px rgba(40, 22, 9, 0.35), 0 0 0 2px rgba(245, 211, 124, 0.25);
}

.classic-map-road {
    position: absolute;
    background: rgba(155, 112, 58, 0.78);
    box-shadow: 0 0 0 5px rgba(95, 63, 31, 0.16);
}

.classic-map-road-a {
    left: 48%;
    top: 5%;
    width: 6%;
    height: 88%;
    transform: rotate(31deg);
}

.classic-map-road-b {
    left: 16%;
    top: 50%;
    width: 72%;
    height: 6%;
    transform: rotate(-12deg);
}

.classic-map-square {
    position: absolute;
    left: 45%;
    top: 48%;
    width: 74px;
    height: 54px;
    background: rgba(179, 132, 62, 0.86);
    border: 2px solid rgba(93, 59, 27, 0.55);
    transform: translate(-50%, -50%) rotate(-8deg);
}

.classic-map-building {
    position: absolute;
    left: var(--map-x);
    top: var(--map-y);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.classic-map-building > .classic-map-building-link {
    width: 76px;
    height: 62px;
    padding: 0;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(to bottom, #b97838, #73401e);
    border: 2px solid #4b2b15;
    border-radius: 4px 4px 2px 2px;
    color: #fff1bd;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.36);
}

.classic-map-building > .classic-map-building-link::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: -18px;
    height: 26px;
    background: linear-gradient(135deg, #803116 0 50%, #a94f24 51%);
    border: 2px solid #4b2b15;
    transform: skewX(-18deg);
}

.classic-map-building > .classic-map-building-link:hover {
    transform: none;
    background: linear-gradient(to bottom, #c98a44, #854b24);
}

.classic-map-building.is-unbuilt {
    opacity: 0.62;
}

.classic-map-building.is-unbuilt button {
    background: rgba(78, 68, 48, 0.6);
    border-style: dashed;
}

.classic-map-building-iron > .classic-map-building-link {
    background: linear-gradient(to bottom, #8a8a78, #4f4e44);
}

.classic-map-building-wood > .classic-map-building-link {
    background: linear-gradient(to bottom, #8a5b2c, #4c3218);
}

.classic-map-building-farm > .classic-map-building-link {
    background: linear-gradient(to bottom, #c29a45, #76551d);
}

.classic-map-icon {
    position: relative;
    z-index: 2;
    font-size: 24px;
    line-height: 1;
}

.classic-map-level {
    position: absolute;
    left: -8px;
    top: -12px;
    z-index: 3;
    min-width: 26px;
    padding: 2px 4px;
    background: #5d8d3c;
    border: 1px solid #e7f2b1;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 1px #1b3215;
}

.classic-side-panels {
    display: grid;
    gap: 8px;
}

.classic-info-list {
    padding: 6px;
    display: grid;
    gap: 4px;
}

.classic-info-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 5px;
    align-items: center;
    padding: 3px 4px;
    background: rgba(255, 239, 182, 0.45);
    border: 1px solid rgba(125, 85, 38, 0.38);
    font-size: 12px;
}

.classic-info-row strong {
    color: #4d260c;
}

.classic-info-row small {
    color: #6d3d18;
}

.classic-empty-text {
    padding: 7px;
    color: #5c3718;
    font-size: 12px;
}

/* Craft-Imperium Dorfübersicht - dunklere, kontrastreichere Variante */
.classic-village-page {
    padding: 18px;
    margin: 30px auto 30px;
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(0, 0, 0, 0.28)),
        #241f1a;
    border: 2px solid #d4af37;
    border-radius: 4px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.7), 0 10px 26px rgba(0, 0, 0, 0.75);
}

.classic-village-shell {
    grid-template-columns: minmax(760px, 1fr) 245px;
    gap: 12px;
    color: #f1d98a;
}

.classic-panel,
.classic-village-main {
    background: linear-gradient(to bottom, #3c3328, #241e18);
    border: 1px solid #b88a2d;
    border-radius: 4px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.58), 0 4px 12px rgba(0, 0, 0, 0.58);
}

.classic-panel-title,
.classic-village-topbar {
    min-height: 32px;
    padding: 7px 10px;
    background: linear-gradient(to bottom, #d4af37, #8b621d);
    border-bottom: 1px solid #5c3b15;
    color: #1a1410;
    text-shadow: 0 1px 0 rgba(255, 236, 157, 0.42);
    font-size: 13px;
    letter-spacing: 0.2px;
}

.classic-building-list,
.classic-info-list {
    padding: 8px;
}

.classic-building-row button {
    min-height: 62px;
    padding: 7px;
    background: linear-gradient(to bottom, #4a3d2f, #2b231b);
    border: 1px solid #8b7355;
    border-radius: 3px;
    color: #e6cf85;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.48);
}

.classic-building-row button:hover {
    background: linear-gradient(to bottom, #665137, #362a1d);
    border-color: #d4af37;
    color: #ffd700;
}

.classic-building-row.is-unbuilt button {
    opacity: 0.78;
    border-style: dashed;
}

.classic-building-row.is-built button {
    border-left: 4px solid #79a846;
}

.classic-building-thumb {
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 215, 0, 0.18), transparent 45%),
        linear-gradient(to bottom, #2f4f2a, #1d2e19);
    border: 1px solid #d4af37;
    border-radius: 3px;
}

.classic-building-meta strong {
    color: #ffd700;
    font-size: 12px;
}

.classic-building-meta small {
    color: #c0c0c0;
}

.classic-village-topbar a {
    color: #1a1410;
    font-weight: bold;
}

.classic-village-map {
    height: 700px;
    background:
        radial-gradient(circle at 50% 49%, rgba(189, 142, 52, 0.82) 0 17%, rgba(112, 73, 33, 0.42) 18% 26%, transparent 27%),
        radial-gradient(ellipse at 17% 20%, rgba(37, 81, 39, 0.72) 0 20%, transparent 21%),
        radial-gradient(ellipse at 83% 18%, rgba(80, 75, 63, 0.6) 0 19%, transparent 20%),
        radial-gradient(ellipse at 20% 86%, rgba(99, 112, 45, 0.62) 0 24%, transparent 25%),
        linear-gradient(135deg, #33451f 0%, #5d7336 30%, #9b7938 31%, #aa8240 54%, #657735 55%, #33451f 100%);
    border-top: 1px solid #5c3b15;
    box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.62);
}

.classic-village-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(0, 0, 0, 0.24) 100%),
        linear-gradient(135deg, rgba(255, 224, 142, 0.05), transparent 42%, rgba(0, 0, 0, 0.12));
    background-size: auto;
    pointer-events: none;
}

.classic-village-map::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 215, 0, 0.16);
    pointer-events: none;
}

.classic-map-grass {
    display: none;
}

.classic-map-wall {
    left: 8%;
    right: 8%;
    top: 9%;
    bottom: 9%;
    border: 16px solid #4b301a;
    border-radius: 49% 46% 47% 44%;
    box-shadow:
        inset 0 0 0 4px rgba(169, 118, 47, 0.42),
        0 0 0 2px rgba(255, 218, 120, 0.28),
        0 10px 18px rgba(0, 0, 0, 0.38);
}

.classic-map-wall::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 2px dashed rgba(220, 174, 76, 0.5);
    border-radius: inherit;
}

.classic-map-road {
    display: none;
}

.classic-map-square {
    display: none;
}

.classic-map-building > .classic-map-building-link {
    width: 86px;
    height: 68px;
    background:
        linear-gradient(to bottom, rgba(255, 229, 150, 0.18), transparent 45%),
        linear-gradient(to bottom, #8a5a2c, #402817);
    border: 2px solid #2b1a0d;
    border-radius: 4px 4px 2px 2px;
    box-shadow:
        0 10px 12px rgba(0, 0, 0, 0.46),
        inset 0 0 0 1px rgba(255, 220, 126, 0.18);
}

.classic-map-building > .classic-map-building-link::before {
    left: 8px;
    right: 8px;
    top: -20px;
    height: 30px;
    background:
        linear-gradient(135deg, #692713 0 49%, #a84b23 50%),
        linear-gradient(to bottom, rgba(255, 222, 130, 0.28), transparent);
    border-color: #2b1a0d;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 126, 0.16);
}

.classic-map-building > .classic-map-building-link:hover {
    border-color: #ffd700;
    box-shadow:
        0 12px 14px rgba(0, 0, 0, 0.52),
        0 0 12px rgba(212, 175, 55, 0.55),
        inset 0 0 0 1px rgba(255, 220, 126, 0.28);
}

.classic-map-building-iron > .classic-map-building-link {
    background: linear-gradient(to bottom, #87816d, #423f36);
}

.classic-map-building-wood > .classic-map-building-link {
    background: linear-gradient(to bottom, #7e5127, #352314);
}

.classic-map-building-farm > .classic-map-building-link {
    background: linear-gradient(to bottom, #a98536, #553b17);
}

.classic-map-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.75));
}

.classic-map-level {
    left: -10px;
    top: -16px;
    min-width: 30px;
    padding: 3px 5px;
    background: linear-gradient(to bottom, #79a846, #3f6d2c);
    border: 1px solid #e7f2b1;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.classic-info-row {
    background: linear-gradient(to bottom, rgba(69, 55, 39, 0.98), rgba(39, 31, 23, 0.98));
    border: 1px solid #8b7355;
    color: #d7c18a;
}

.classic-info-row strong {
    color: #ffd700;
}

.classic-info-row small,
.classic-empty-text {
    color: #c0c0c0;
}

/* Dorf-Feinschliff: näher an Navbar/Footer, weniger braune Gebäudeboxen */
.classic-village-page {
    background:
        linear-gradient(to bottom, rgba(26, 20, 16, 0.96), rgba(36, 31, 26, 0.98)),
        #1a1410;
    border-color: #d4af37;
}

.classic-village-page {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.classic-panel,
.classic-village-main {
    background: linear-gradient(to bottom, #211a14, #15100c);
    border-color: #8b7355;
}

.classic-panel-title,
.classic-village-topbar {
    background: linear-gradient(to bottom, #2a2520, #1a1410);
    border-bottom: 2px solid #d4af37;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}

.classic-panel-title-with-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.classic-panel-title-with-count strong {
    color: #fff2a8;
    font-size: 12px;
}

.classic-village-topbar a {
    color: #ffd700;
}

.classic-building-row button {
    background: linear-gradient(to bottom, #2f2820, #1a1410);
    border-color: #5f503d;
    color: #d4af37;
}

.classic-building-row button:hover {
    background: linear-gradient(to bottom, #3b3126, #211a14);
    border-color: #d4af37;
}

.classic-map-building > .classic-map-building-link,
.classic-map-building-iron > .classic-map-building-link,
.classic-map-building-wood > .classic-map-building-link,
.classic-map-building-farm > .classic-map-building-link {
    width: 72px;
    height: 72px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.classic-map-building > .classic-map-building-link::before {
    display: none;
}

.classic-map-building > .classic-map-building-link:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.classic-map-building.is-unbuilt button {
    background: transparent;
    border: 0;
}

.classic-map-icon {
    font-size: 42px;
}

.classic-map-level {
    left: -12px;
    top: -10px;
}

.classic-map-production-progress {
    position: absolute;
    left: 22px;
    top: -7px;
    z-index: 3;
    width: 42px;
    height: 7px;
    overflow: hidden;
    background: linear-gradient(to bottom, #1a1410, #2a2520);
    border: 1px solid #8b7355;
    border-radius: 2px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.55);
}

.classic-map-production-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, #5f8f34, #d4af37, #ffd700);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.65);
}

.classic-map-production-progress.is-full span {
    width: 100%;
    background: linear-gradient(to right, #5b5548, #8b7355);
    box-shadow: none;
}

.classic-info-row.is-negative strong {
    color: #ff8b7d;
}

.classic-info-row.is-positive strong {
    color: #9be07b;
}

.classic-production-warning {
    margin: 6px 8px 8px;
    padding: 7px 8px;
    color: #ffd3cd;
    background: rgba(91, 28, 22, 0.55);
    border: 1px solid #9f3d32;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.35;
}

.classic-map-production-float {
    position: absolute;
    z-index: 5;
    min-width: 58px;
    padding: 3px 6px;
    pointer-events: none;
    color: #fff2a8;
    background: rgba(26, 20, 16, 0.88);
    border: 1px solid #d4af37;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 8px rgba(212, 175, 55, 0.35);
    animation: production-float-pop 1.15s ease-out forwards;
}

.classic-build-queue {
    padding: 8px;
    display: grid;
    gap: 8px;
}

.classic-build-queue-row {
    display: grid;
    gap: 5px;
    padding: 7px;
    background: linear-gradient(to bottom, rgba(69, 55, 39, 0.98), rgba(39, 31, 23, 0.98));
    border: 1px solid #8b7355;
    border-radius: 3px;
    color: #d7c18a;
}

.classic-build-queue-row strong {
    color: #ffd700;
    font-size: 12px;
    line-height: 1.2;
}

.classic-build-queue-row small {
    color: #c0c0c0;
    font-size: 11px;
}

.classic-build-queue-cancel-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.classic-build-queue-cancel-button {
    min-height: 25px;
    padding: 3px 9px;
    font-size: 11px;
    line-height: 1.2;
}

.classic-build-queue-progress {
    position: relative;
    height: 18px;
    overflow: hidden;
    background: linear-gradient(to bottom, #1a1410, #2a2520);
    border: 1px solid #8b7355;
    border-radius: 2px;
    box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.75);
}

.classic-build-queue-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, #5f8f34, #d4af37);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
}

.classic-build-queue-progress em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff2a8;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 2px #000;
}

@keyframes production-float-pop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }
    16% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-24px) scale(0.98);
    }
}

.has-building-modal {
    overflow: hidden;
}

.building-modal[hidden] {
    display: none;
}

.building-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.building-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 7, 4, 0.78);
    backdrop-filter: blur(2px);
}

/* Zentrales Modal-Layoutsystem: Größen werden über ein einziges Profil gesteuert. */
.ci-modal-surface {
    --ci-modal-inline-size: 48rem;
    --ci-modal-block-size: 52rem;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.ci-modal-surface[data-modal-size="compact"] {
    --ci-modal-inline-size: 32rem;
    --ci-modal-block-size: 38rem;
}

.ci-modal-surface[data-modal-size="standard"] {
    --ci-modal-inline-size: 48rem;
    --ci-modal-block-size: 52rem;
}

.ci-modal-surface[data-modal-size="wide"] {
    --ci-modal-inline-size: 74rem;
    --ci-modal-block-size: 56rem;
}

.ci-modal-surface[data-modal-size="full"] {
    --ci-modal-inline-size: 90rem;
    --ci-modal-block-size: 62rem;
}

.building-modal-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(var(--ci-modal-inline-size, 48rem), 100%);
    max-height: min(var(--ci-modal-block-size, 52rem), calc(100vh - 40px));
    max-height: min(var(--ci-modal-block-size, 52rem), calc(100dvh - 40px));
    overflow: hidden;
    background: linear-gradient(to bottom, #3c3328, #211a14);
    border: 2px solid #d4af37;
    border-radius: 4px;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.72), 0 16px 36px rgba(0, 0, 0, 0.85);
    color: #d7c18a;
}

.building-modal-titlebar {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(to bottom, #d4af37, #8b621d);
    border-bottom: 1px solid #5c3b15;
    color: #1a1410;
}

.building-modal-titlebar > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.building-modal-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: rgba(26, 20, 16, 0.82);
    border: 1px solid rgba(255, 230, 150, 0.55);
    border-radius: 3px;
    font-size: 20px;
}

.building-modal-close {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #241a10;
    border: 1px solid #5c3b15;
    color: #ffd700;
    border-radius: 3px;
    box-shadow: none;
}

.building-modal-close:hover {
    transform: none;
    background: #3a2918;
}

.building-modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.building-modal-description {
    margin-bottom: 15px;
    color: #c0c0c0;
}

.building-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.building-modal-stats div,
.building-modal-section {
    background: linear-gradient(to bottom, rgba(69, 55, 39, 0.98), rgba(39, 31, 23, 0.98));
    border: 1px solid #8b7355;
    border-radius: 3px;
    padding: 10px;
}

.building-modal-stats span,
.building-modal-section h4 {
    display: block;
    color: #b8860b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.building-modal-stats strong {
    display: block;
    margin-top: 4px;
    color: #ffd700;
    font-size: 18px;
}

.building-modal-section {
    margin-bottom: 12px;
}

.building-modal-section h4 {
    margin-bottom: 8px;
}

.building-modal-section p {
    color: #d7c18a;
}

.building-modal-costs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.building-modal-costs > span {
    padding: 6px 8px;
    background: #1a1410;
    border: 1px solid #5f503d;
    border-radius: 3px;
    color: #c0c0c0;
    font-size: 12px;
}

.building-modal-costs strong {
    margin-left: 4px;
    color: #ffd700;
}

.building-modal-benefits {
    display: grid;
    gap: 6px;
}

.building-modal-benefits div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: center;
    padding: 6px 7px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid #5f503d;
    border-radius: 3px;
}

.building-modal-benefits span {
    color: #c0c0c0;
    font-size: 11px;
}

.building-modal-benefits strong {
    color: #ffd700;
    font-size: 12px;
}

.building-modal-benefits em {
    grid-column: 1 / -1;
    color: #9fdf68;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
}

.building-modal-benefits div.is-negative em,
.building-modal-costs > span.is-population-cost strong {
    color: #ef8f84;
}

.building-modal-production-list {
    display: grid;
    gap: 7px;
}

.building-modal-production-list > div {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr;
    gap: 3px 10px;
    padding: 7px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid #5f503d;
    border-radius: 3px;
}

.building-modal-production-list strong {
    color: #ffd700;
}

.building-modal-production-list span {
    color: #d7c18a;
    text-align: right;
}

.building-modal-production-list small {
    grid-column: 1 / -1;
    color: #c0c0c0;
}

.building-modal-actions {
    flex: 0 0 auto;
    padding: 0 16px 16px;
}

.building-modal-actions button {
    width: 100%;
}

.building-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.building-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, #342d27, #241f1a);
    border: 1px solid #8b7355;
    border-radius: 4px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
}

.building-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.building-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    background: #1a1410;
    border: 1px solid #8b7355;
    border-radius: 3px;
    font-size: 24px;
}

.building-card h3 {
    color: #ffd700;
    font-size: 21px;
    margin-bottom: 2px;
}

.building-description {
    color: #c0c0c0;
    font-size: 14px;
    margin-bottom: 16px;
}

.building-production {
    padding: 10px 12px;
    margin-bottom: 14px;
    color: #c0c0c0;
    background: rgba(212, 175, 55, 0.08);
    border-left: 3px solid #d4af37;
    font-size: 14px;
}

.building-production strong {
    color: #ffd700;
}

.building-costs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 18px;
}

.building-cost {
    padding: 5px 8px;
    background: #1a1410;
    border: 1px solid #5f503d;
    border-radius: 3px;
    color: #b8860b;
    font-size: 12px;
}

.building-cost strong {
    color: #ffd700;
}

.building-action {
    margin-top: auto;
}

.building-action button {
    width: 100%;
}

button:disabled,
button:disabled:hover {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    background: linear-gradient(to bottom, #666, #333);
    border-color: #777;
    color: #c0c0c0;
    box-shadow: none;
}

@media (max-width: 768px) {
    .classic-village-shell {
        grid-template-columns: 1fr;
    }

    .classic-village-map {
        height: 560px;
    }

    .village-grid-layout {
        grid-template-columns: 1fr;
    }

    .village-grid-board-wrap {
        padding: 10px;
    }

    .village-layout {
        grid-template-columns: 1fr;
    }

    .village-map {
        min-height: 620px;
    }

    .village-plot-large,
    .village-plot-medium,
    .village-plot-small {
        width: 112px;
    }

    .village-building,
    .village-empty-plot {
        min-height: 78px;
        padding: 7px;
    }
}

/* ========== ERROR PAGE ========== */
.error-container {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}

.error-container h1 {
    font-size: 64px;
    color: #e74c3c;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
}

.error-container p {
    color: #d4af37;
    margin-bottom: 30px;
}

/* ========== HOME PAGE (PUBLIC) ========== */
.home-hero {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.3));
    border: 2px solid #d4af37;
    border-radius: 4px;
    margin-bottom: 40px;
}

.home-hero h1 {
    font-size: 52px;
    color: #ffd700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
}

.home-hero p {
    color: #d4af37;
    font-size: 18px;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: 15px 40px;
    font-size: 16px;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.feature-card {
    background: linear-gradient(to bottom, #3d3630, #2a2520);
    border: 2px solid #d4af37;
    padding: 30px;
    text-align: center;
    border-radius: 3px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(212, 175, 55, 0.4);
}

.feature-card h3 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 22px;
}

.feature-card p {
    color: #c0c0c0;
    line-height: 1.8;
}

.feature-icon {
    font-size: 48px;
    color: #d4af37;
    margin-bottom: 15px;
}

/* ========== UTILITIES ========== */
.text-center {
    text-align: center;
}

.text-gold {
    color: #d4af37;
}

.text-light {
    color: #c0c0c0;
}

.text-muted {
    color: #b8860b;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

/* Upgrade-Kosten: Nur die benötigte Zahl wird rot, wenn der Bestand nicht reicht. */
.building-modal-costs > span.is-insufficient strong {
    color: #ff5b4d;
    text-shadow: 0 0 5px rgba(255, 91, 77, 0.35);
}

/* Gespeicherte Einstellungen der Dorfübersicht */
.classic-village-topbar {
    align-items: center;
}

.classic-resource-text-setting {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    color: #fff2a8;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
}

.classic-toggle-switch {
    position: relative;
    width: 44px;
    height: 22px;
    flex: 0 0 44px;
    cursor: pointer;
}

.classic-toggle-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.classic-toggle-switch-slider {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #4a4035, #282119);
    border: 1px solid #8b7355;
    border-radius: 999px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.classic-toggle-switch-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: linear-gradient(to bottom, #eee1b4, #a88945);
    border: 1px solid #4e3619;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
    transition: transform 0.18s ease;
}

.classic-toggle-switch input:checked + .classic-toggle-switch-slider {
    background: linear-gradient(to bottom, #728f3e, #405421);
    border-color: #d4af37;
}

.classic-toggle-switch input:checked + .classic-toggle-switch-slider::before {
    transform: translateX(22px);
}

.classic-toggle-switch input:focus-visible + .classic-toggle-switch-slider {
    outline: 2px solid #fff2a8;
    outline-offset: 2px;
}

.village-resource-floats-disabled .classic-map-production-float {
    display: none !important;
}

.classic-panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #d4af37;
    border-radius: 0;
    box-shadow: none;
    color: #ffd700;
    font: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.classic-panel-toggle:hover,
.classic-panel-toggle:focus-visible {
    background: linear-gradient(to bottom, #39322b, #211a14);
    border-color: #ffd700;
    color: #fff2a8;
    box-shadow: none;
    transform: none;
}

.classic-panel-toggle:focus-visible {
    outline: 2px solid #fff2a8;
    outline-offset: -3px;
}

.classic-panel-toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.classic-panel-toggle-meta strong {
    color: #fff2a8;
    font-size: 12px;
}

.classic-panel-toggle-arrow {
    display: inline-block;
    min-width: 14px;
    color: #fff2a8;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    transition: transform 0.18s ease;
}

.classic-panel.is-collapsed .classic-panel-toggle-arrow {
    transform: rotate(-90deg);
}

[data-village-panel-content][hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .classic-village-topbar {
        flex-wrap: wrap;
    }

    .classic-resource-text-setting {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding-top: 4px;
    }
}

/* Haupt-Dorffläche einklappen, ohne Gebäude oder laufende Timer aus dem DOM zu entfernen. */
.classic-village-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: bold;
    letter-spacing: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.classic-village-map-toggle:hover,
.classic-village-map-toggle:focus-visible {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff2a8;
    transform: none;
}

.classic-village-map-toggle:focus-visible {
    outline: 2px solid #fff2a8;
    outline-offset: 3px;
}

.classic-village-main.is-collapsed .classic-panel-toggle-arrow {
    transform: rotate(-90deg);
}

.classic-village-main.is-collapsed .classic-village-topbar {
    border-bottom-color: #8b7355;
}

/* ========== MULTIWORLD ========== */
.navbar-world {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border: 1px solid #8b7355;
    border-radius: 3px;
    background: rgba(212, 175, 55, 0.08);
    color: #f0d77a;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.25px;
    white-space: nowrap;
}

.form-hint {
    display: block;
    margin-top: 7px;
    color: #aaa08f;
    font-size: 12px;
    line-height: 1.45;
}

.form-hint-error {
    color: #ff8b8b;
}

button:disabled,
.btn:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ========== RESSOURCENLEISTE AN DORFBREITE AUSRICHTEN ========== */
/*
 * Der Hauptbereich ist maximal 1200px breit und besitzt links/rechts je 20px
 * Innenabstand. Dadurch sind Dorfübersicht + rechte Seitenleiste zusammen
 * effektiv 1160px breit. Die Ressourcenleiste verwendet nun exakt dieselbe
 * Breite und bleibt darin als geschlossene Gruppe zentriert.
 */
.resource-bar {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.resource-bar-content {
    width: calc(100% - 40px);
    max-width: 1160px;
    margin: 0 auto;
    justify-content: center;
    background: linear-gradient(to bottom, #2a2520, #1a1410);
    border: 1px solid #8b7355;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);
}

@media (max-width: 768px) {
    .resource-bar-content {
        width: calc(100% - 40px);
    }
}

/* Produktionssteuerung: Balkenstände bleiben bei Nahrungspause oder manueller Pause erhalten. */
.classic-map-production-progress.is-production-paused {
    border-color: #b68a34;
    background: linear-gradient(to bottom, #2c2312, #4a3718);
}

.classic-map-production-progress.is-production-paused span {
    background: linear-gradient(to right, #8a6424, #d4af37);
    box-shadow: none;
}

.building-modal-production-list small.is-production-paused {
    color: #f1cb72;
    font-weight: bold;
}

.building-modal-production-actions {
    padding-bottom: 8px;
}

.building-modal-production-actions button.is-pause {
    border-color: #b68a34;
    background: linear-gradient(to bottom, #5a431c, #34250f);
}

.building-modal-production-actions button.is-resume {
    border-color: #6c9b4a;
    background: linear-gradient(to bottom, #41682a, #27421a);
}

.building-modal-production-actions small {
    display: block;
    margin-top: 6px;
    color: #bfb39d;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

/* ========== KASERNE UND EINHEITEN ========== */
/*
 * Die Dorfübersicht zeigt Gebäude bewusst ohne Button-Fläche. Die später
 * definierte Militärregel hatte bei der Kaserne wieder eine Fläche gesetzt,
 * die durch die allgemeine Hover-Regel plötzlich verschwand. Basis-, Hover-
 * und Tastaturfokuszustand sind deshalb ausdrücklich identisch.
 */
.classic-map-building-military > .classic-map-building-link,
.classic-map-building-military > .classic-map-building-link:hover,
.classic-map-building-military > .classic-map-building-link:focus-visible {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.classic-map-building-military > .classic-map-building-link::before {
    display: none;
}

.classic-unit-overview {
    gap: 0;
}

.classic-unit-row strong {
    color: #f0d77a;
}

.classic-unit-queue-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 9px 10px;
    border-top: 1px solid #6f5a42;
    border-bottom: 1px solid #51402f;
    color: #d9c49b;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.classic-unit-queue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(111, 90, 66, 0.45);
    font-size: 12px;
}

.classic-unit-queue-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classic-unit-queue-row strong {
    color: #f0d77a;
    font-size: 11px;
}

.classic-unit-queue-row small {
    grid-column: 1 / -1;
    color: #a99b86;
    font-size: 10px;
}

.building-modal-unit-training > p {
    margin-bottom: 12px;
    color: #c6b797;
}

.unit-training-list {
    display: grid;
    gap: 12px;
}

.unit-training-card {
    padding: 12px;
    border: 1px solid #755f42;
    border-radius: 4px;
    background: linear-gradient(to bottom, rgba(67, 53, 39, 0.92), rgba(35, 27, 21, 0.96));
}

.unit-training-card.is-locked {
    opacity: 0.62;
}

.unit-training-card header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.unit-training-card header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-training-card header strong {
    color: #f3d77a;
    font-size: 15px;
}

.unit-training-card header small {
    color: #bfb39d;
    font-size: 11px;
}

.unit-training-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #9b7b4a;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.24);
    font-size: 22px;
}

.unit-training-card > p {
    margin: 0 0 10px;
    color: #d0c4ae;
    font-size: 12px;
    line-height: 1.45;
}

.unit-training-stats,
.unit-training-costs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 8px;
    margin-bottom: 10px;
}

.unit-training-stats > span,
.unit-training-costs > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid rgba(117, 95, 66, 0.62);
    background: rgba(0, 0, 0, 0.18);
    color: #bfb39d;
    font-size: 11px;
}

.unit-training-stats strong,
.unit-training-costs strong {
    color: #f0d77a;
}

.unit-training-lock {
    margin: 0 !important;
    padding: 8px;
    border: 1px solid #8b5a42;
    background: rgba(105, 48, 34, 0.24);
    color: #f1a48b !important;
    font-weight: bold;
    text-align: center;
}

.unit-training-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: end;
}

.unit-training-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #c8baa1;
    font-size: 11px;
}

.unit-training-form input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #8b7355;
    border-radius: 3px;
    background: #17120e;
    color: #f6e7b0;
}

.unit-training-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px;
    border: 1px solid #6f5a42;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    color: #bfb39d;
    font-size: 11px;
}

.unit-training-total strong {
    color: #f0d77a;
}

.unit-training-form button {
    grid-column: 1;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #a88454;
    background: linear-gradient(to bottom, #5e4724, #362711);
    color: #fff0b3;
    font-weight: bold;
    cursor: pointer;
}

.classic-unit-training-task small {
    color: #d7c18a;
}

.unit-training-form button:hover:not(:disabled) {
    border-color: #e1bd69;
    background: linear-gradient(to bottom, #795d30, #493617);
}

@media (max-width: 560px) {
    .unit-training-stats,
    .unit-training-costs,
    .unit-training-form {
        grid-template-columns: 1fr;
    }

    .unit-training-form button {
        grid-column: 1;
    }
}

/* ========== WELTKARTE ========== */
.world-map-page {
    padding: 18px 0 32px;
}

.world-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 0 18px;
    padding: 22px 24px;
    border: 2px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(69, 57, 45, 0.97), rgba(34, 27, 21, 0.98));
    text-align: left;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.world-map-header h1 {
    margin: 0 0 6px;
    color: #f2d36c;
    font-size: 34px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.85);
}

.world-map-header p {
    margin: 0;
    color: #d3c5ad;
    font-size: 14px;
    font-style: normal;
}

.world-map-kicker {
    margin-bottom: 2px !important;
    color: #b9944d !important;
    font-size: 11px !important;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.world-map-home-link,
.world-map-jump button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #b38b48;
    border-radius: 3px;
    background: linear-gradient(to bottom, #674d24, #3d2c14);
    color: #fff0b0;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.world-map-home-link:hover,
.world-map-home-link:focus-visible,
.world-map-jump button:hover,
.world-map-jump button:focus-visible {
    border-color: #ebc86f;
    background: linear-gradient(to bottom, #80612e, #4a3518);
    outline: none;
}

.world-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
}

.world-map-main,
.world-map-card {
    border: 1px solid #786246;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(55, 45, 35, 0.98), rgba(29, 23, 18, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.38);
}

.world-map-main {
    min-width: 0;
    padding: 14px;
}

.world-map-controls {
    display: grid;
    grid-template-columns: 42px minmax(120px, 1fr) 42px;
    grid-template-areas:
        ". north ."
        "west center east"
        ". south .";
    gap: 5px;
    max-width: 320px;
    margin: 0 auto 12px;
}

.world-map-direction {
    display: grid;
    width: 42px;
    height: 34px;
    place-items: center;
    border: 1px solid #8f7043;
    border-radius: 3px;
    background: rgba(21, 16, 12, 0.78);
    color: #e0c067;
    text-decoration: none;
}

.world-map-direction:hover,
.world-map-direction:focus-visible {
    border-color: #d4af37;
    background: rgba(94, 70, 31, 0.62);
    outline: none;
}

.world-map-direction-north {
    grid-area: north;
}

.world-map-controls > .world-map-direction:nth-of-type(2) {
    grid-area: west;
}

.world-map-controls > .world-map-direction:nth-of-type(3) {
    grid-area: east;
}

.world-map-direction-south {
    grid-area: south;
}

.world-map-center-label {
    grid-area: center;
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid #66533d;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
    color: #d6c49f;
    font-size: 12px;
    font-weight: bold;
}

.world-map-jump {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 8px;
    margin-bottom: 14px;
}

.world-map-jump label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #c6b58f;
    font-size: 11px;
    font-weight: bold;
}

.world-map-jump input {
    width: 104px;
    padding: 8px;
    border: 1px solid #715c40;
    border-radius: 3px;
    background: #18120e;
    color: #f3df9b;
}

.world-map-scroll {
    max-width: 100%;
    overflow: auto;
    border: 2px solid #604f3a;
    border-radius: 4px;
    background:
        linear-gradient(rgba(40, 66, 36, 0.34), rgba(40, 66, 36, 0.34)),
        repeating-linear-gradient(45deg, #4a5a35 0, #4a5a35 18px, #435131 18px, #435131 36px);
}

.world-map-grid {
    display: grid;
    grid-template-columns: repeat(var(--world-map-columns), 78px);
    width: max-content;
    min-width: 100%;
}

.world-map-cell {
    position: relative;
    display: flex;
    min-width: 78px;
    height: 78px;
    padding: 15px 4px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(46, 55, 31, 0.72);
    border-bottom: 1px solid rgba(46, 55, 31, 0.72);
    color: #ddd0ae;
    text-align: center;
    text-decoration: none;
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.world-map-cell:hover,
.world-map-cell:focus-within {
    z-index: 2;
    background: rgba(214, 180, 80, 0.18);
    box-shadow: inset 0 0 0 2px rgba(229, 197, 104, 0.72);
    outline: none;
}

.world-map-cell-primary-link {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

.world-map-cell-primary-link:focus-visible {
    outline: 2px solid #f0d47c;
    outline-offset: -2px;
}

.world-map-cell > span,
.world-map-cell > strong,
.world-map-cell > small {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.world-map-alliance-link {
    position: relative;
    z-index: 3;
    margin-top: 2px;
    color: #f6dc8a;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    text-decoration: underline;
}

.world-map-alliance-link:hover,
.world-map-alliance-link:focus-visible {
    color: #fff4bd;
    outline: none;
}

.world-map-cell.has-village {
    background: radial-gradient(circle at center, rgba(139, 103, 48, 0.72), rgba(61, 55, 33, 0.72));
}

.world-map-cell.is-own-village {
    background: radial-gradient(circle at center, rgba(182, 145, 51, 0.92), rgba(75, 61, 28, 0.88));
    box-shadow: inset 0 0 0 2px #e8c65f;
}

.world-map-cell.is-empty {
    background: rgba(58, 77, 43, 0.18);
}

.world-map-coordinate {
    position: absolute;
    top: 3px;
    left: 4px;
    color: rgba(236, 225, 195, 0.67);
    font-size: 9px;
    line-height: 1;
}

.world-map-village-icon {
    font-size: 25px;
    line-height: 1;
}

.world-map-cell strong {
    display: block;
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #ffe18a;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-cell small {
    color: #d2c5aa;
    font-size: 8px;
    line-height: 1.1;
}

.world-map-sidebar {
    display: grid;
    gap: 12px;
}

.world-map-card {
    padding: 14px;
}

.world-map-card h2 {
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #715c40;
    color: #efd171;
    font-size: 17px;
}

.world-map-card dl {
    display: grid;
    gap: 6px;
}

.world-map-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(113, 92, 64, 0.45);
}

.world-map-card dt {
    color: #a9987d;
    font-size: 12px;
}

.world-map-card dd {
    color: #f0d47c;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}

.world-map-village-list {
    display: grid;
    max-height: 360px;
    gap: 6px;
    overflow: auto;
    list-style: none;
}

.world-map-village-list .world-map-village-list-main {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid #604f3a;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.17);
    color: #d8c9a9;
    text-decoration: none;
}

.world-map-village-list .world-map-village-list-main:hover,
.world-map-village-list .world-map-village-list-main:focus-visible,
.world-map-village-list .is-own-village .world-map-village-list-main {
    border-color: #b18b46;
    background: rgba(117, 86, 35, 0.28);
    outline: none;
}

.world-map-village-list .world-map-village-list-main > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.world-map-village-list .world-map-village-list-alliance {
    display: block;
    margin: 3px 7px 0;
    color: #d7bc70;
    font-size: 10px;
    text-decoration: none;
}

.world-map-village-list .world-map-village-list-alliance:hover,
.world-map-village-list .world-map-village-list-alliance:focus-visible {
    color: #fff0a7;
    text-decoration: underline;
    outline: none;
}

.world-map-village-list strong {
    overflow: hidden;
    color: #f0d47c;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-village-list small {
    color: #aa9d84;
    font-size: 10px;
}

.world-map-legend p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: #c9bda4;
    font-size: 12px;
}

.world-map-empty-symbol {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #566844;
    background: rgba(58, 77, 43, 0.45);
}

@media (max-width: 900px) {
    .world-map-layout {
        grid-template-columns: 1fr;
    }

    .world-map-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .world-map-legend {
        grid-column: 1 / -1;
    }
}

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

    .world-map-header h1 {
        font-size: 28px;
    }

    .world-map-jump {
        align-items: stretch;
        flex-direction: column;
    }

    .world-map-jump input {
        width: 100%;
    }

    .world-map-sidebar {
        grid-template-columns: 1fr;
    }

    .world-map-legend {
        grid-column: auto;
    }

    .world-map-grid {
        grid-template-columns: repeat(var(--world-map-columns), 70px);
    }

    .world-map-cell {
        min-width: 70px;
        height: 70px;
    }
}

/* ========== AKTIVER DORFKONTEXT ========== */
.resource-item-village {
    min-width: 330px;
    justify-content: flex-start;
    padding-top: 4px;
    padding-bottom: 4px;
}

.resource-village-current {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.1;
}

.resource-village-current small {
    color: #aa9d84;
    font-size: 10px;
    font-weight: normal;
}

.resource-village-form {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    flex-direction: row;
    flex-wrap: nowrap;
}

.resource-village-form label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
}

.resource-village-form select {
    width: 170px;
    flex: 0 0 170px;
    height: 22px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 2px 6px;
    border-color: #8b7355;
    background: #211a14;
    color: #f0d77a;
    font: 11px Georgia, 'Times New Roman', serif;
}

.resource-village-form button {
    flex: 0 0 auto;
    height: 22px;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid #d4af37;
    border-radius: 3px;
    background: transparent;
    color: #d4af37;
    font: bold 10px Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.resource-village-form button:hover,
.resource-village-form button:focus-visible {
    background: #d4af37;
    color: #1a1410;
    outline: none;
}

.world-map-cell.is-active-village {
    box-shadow: inset 0 0 0 3px #fff2a8, 0 0 12px rgba(255, 226, 118, 0.75);
}

.world-map-village-list .is-active-village a {
    border-color: #efd171;
    box-shadow: inset 0 0 0 1px #efd171;
    background: rgba(151, 111, 42, 0.42);
}

@media (max-width: 1240px) {
    .navbar-content {
        min-height: auto;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
    }

    .navbar-brand {
        position: static;
        transform: none;
    }

    .navbar-menu {
        width: 100%;
        max-width: none;
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .resource-item-village,
    .resource-village-form {
        width: 100%;
    }

    .resource-village-form select {
        min-width: 0;
        max-width: none;
        flex: 1;
        width: auto;
    }
}

@media (max-width: 1350px) {
    .navbar-menu {
        gap: 3px;
    }

    .navbar-menu a {
        padding-right: 5px;
        padding-left: 5px;
    }

    .resource-item-village {
        min-width: 310px;
    }
}

@media (max-width: 1100px) {
    .resource-bar {
        position: relative;
        top: auto;
    }
}

/* ========== GEPRÜFTES DORFZIEL ========== */
.world-map-cell.is-village-target {
    cursor: pointer;
}

.world-map-cell.is-village-target:hover strong,
.world-map-cell.is-village-target:focus-within strong {
    color: #fff2ad;
    text-decoration: underline;
}

.village-target-page {
    padding: 18px 0 32px;
}

.village-target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 2px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(69, 57, 45, 0.97), rgba(34, 27, 21, 0.98));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.village-target-header h1 {
    margin: 0 0 6px;
    color: #f2d36c;
    font-size: 32px;
}

.village-target-header p {
    margin: 0;
    color: #d3c5ad;
    font-size: 14px;
}

.village-target-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.village-target-card {
    padding: 18px;
    border: 1px solid #786246;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(55, 45, 35, 0.98), rgba(29, 23, 18, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.38);
}

.village-target-card h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #715c40;
    color: #efd171;
    font-size: 18px;
}

.village-target-card dl {
    display: grid;
    gap: 0;
}

.village-target-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(113, 92, 64, 0.45);
}

.village-target-card dt {
    color: #a9987d;
    font-size: 12px;
}

.village-target-card dd {
    color: #f0d47c;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}

.village-target-note p {
    margin: 0 0 12px;
    color: #c9bda4;
    font-size: 13px;
    line-height: 1.55;
}

.village-target-note .btn {
    display: inline-flex;
    margin-top: 4px;
}

@media (max-width: 780px) {
    .village-target-header {
        align-items: stretch;
        flex-direction: column;
    }

    .village-target-layout {
        grid-template-columns: 1fr;
    }
}

/* ========== NEUTRALE TRUPPENBEWEGUNGEN ========== */
.troop-movement-scope-note {
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid rgba(141, 112, 70, 0.72);
    border-radius: 4px;
    background: rgba(30, 24, 18, 0.66);
}

.troop-movement-scope-note strong {
    color: #efd171;
}

.troop-movement-scope-note p,
.troop-movement-empty,
.troop-movement-active-note {
    margin: 6px 0 0;
    color: #c9bda4;
    font-size: 12px;
    line-height: 1.5;
}

.troop-movement-send-card .btn {
    display: inline-flex;
    margin-top: 12px;
}

.troop-movement-form {
    display: grid;
    gap: 12px;
}

.troop-movement-unit-list {
    display: grid;
    gap: 8px;
}

.troop-movement-unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(113, 92, 64, 0.58);
    border-radius: 4px;
    background: rgba(25, 20, 16, 0.58);
}

.troop-movement-unit-row > span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 7px;
    min-width: 0;
}

.troop-movement-unit-row > span > span {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 22px;
}

.troop-movement-unit-row strong {
    color: #ead08a;
    font-size: 12px;
}

.troop-movement-unit-row small {
    color: #9f917b;
    font-size: 10px;
}

.troop-movement-unit-row input {
    width: 84px;
    margin: 0;
    padding: 7px 8px;
    text-align: right;
}

.troop-movement-estimate {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 14px;
    padding: 10px 12px;
    border: 1px solid #756044;
    border-radius: 4px;
    background: rgba(16, 13, 10, 0.58);
    color: #a99a83;
    font-size: 11px;
}

.troop-movement-estimate strong {
    color: #f0d47c;
    text-align: right;
}

.troop-movement-form button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.troop-movement-active-note {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(113, 92, 64, 0.5);
}

.troop-movement-task strong a {
    color: #efd171;
    text-decoration: none;
}

.troop-movement-task strong a:hover,
.troop-movement-task strong a:focus-visible {
    text-decoration: underline;
}

.classic-unit-row.is-moving {
    border-top: 1px solid rgba(113, 92, 64, 0.5);
    color: #dbc477;
}

@media (max-width: 520px) {
    .troop-movement-unit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .troop-movement-unit-row input {
        width: 100%;
    }
}

/* Kampfberichte */
.combat-report-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 48px;
}

.combat-report-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.combat-report-page-header h1 {
    margin-bottom: 8px;
}

.combat-report-page-header p:last-child {
    margin-bottom: 0;
}

.combat-report-empty,
.combat-report-list-item,
.combat-report-participant,
.combat-report-result {
    border: 1px solid rgba(151, 124, 73, 0.72);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(35, 28, 21, 0.96), rgba(19, 15, 12, 0.96));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.combat-report-empty {
    padding: 28px;
    text-align: center;
}

.combat-report-empty strong {
    display: block;
    margin-bottom: 8px;
    color: #efd171;
    font-size: 20px;
}

.combat-report-empty .btn {
    margin-top: 12px;
}

.combat-report-list {
    display: grid;
    gap: 14px;
}

.combat-report-list-item {
    overflow: hidden;
}

.combat-report-list-link {
    display: block;
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
}

.combat-report-list-link:hover,
.combat-report-list-link:focus-visible {
    background: rgba(212, 175, 55, 0.08);
    outline: none;
}

.combat-report-list-heading,
.combat-report-list-summary,
.combat-report-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.combat-report-list-heading > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.combat-report-list-heading time,
.combat-report-list-summary,
.combat-report-route small,
.combat-report-route span {
    color: #a99a83;
    font-size: 12px;
}

.combat-report-outcome {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #756044;
    border-radius: 999px;
    background: rgba(20, 16, 12, 0.72);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.combat-report-outcome-victory,
.combat-report-result-victory {
    border-color: rgba(89, 170, 99, 0.75);
}

.combat-report-outcome-defeat,
.combat-report-result-defeat {
    border-color: rgba(190, 75, 75, 0.78);
}

.combat-report-outcome-draw,
.combat-report-outcome-test,
.combat-report-result-draw,
.combat-report-result-test {
    border-color: rgba(198, 157, 64, 0.8);
}

.combat-report-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin: 18px 0;
    padding: 15px;
    border-top: 1px solid rgba(113, 92, 64, 0.45);
    border-bottom: 1px solid rgba(113, 92, 64, 0.45);
}

.combat-report-route > div {
    display: grid;
    gap: 3px;
}

.combat-report-route > div:last-child {
    text-align: right;
}

.combat-report-route strong {
    overflow: hidden;
    color: #ead08a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combat-report-route-arrow {
    color: #d4af37 !important;
    font-size: 24px !important;
}

.combat-report-list-summary {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.combat-report-list-summary span:last-child {
    margin-left: auto;
}

.combat-report-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 20px;
}

.combat-report-result strong {
    color: #efd171;
    font-size: 20px;
}

.combat-report-result span {
    color: #a99a83;
    font-size: 12px;
}

.combat-report-participants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.combat-report-participant {
    min-width: 0;
    padding: 18px;
}

.combat-report-participant > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.combat-report-participant h2 {
    margin: 3px 0 4px;
    color: #ead08a;
}

.combat-report-participant header small,
.combat-report-participant header a {
    color: #a99a83;
    font-size: 11px;
}

.combat-report-participant header a:hover,
.combat-report-participant header a:focus-visible {
    color: #efd171;
}

.combat-report-participant dl {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px;
    margin: 0;
}

.combat-report-participant dl div {
    min-width: 64px;
    padding: 7px 8px;
    border: 1px solid rgba(113, 92, 64, 0.45);
    border-radius: 4px;
    text-align: center;
}

.combat-report-participant dt {
    color: #9f917b;
    font-size: 9px;
    text-transform: uppercase;
}

.combat-report-participant dd {
    margin: 3px 0 0;
    color: #f0d47c;
    font-weight: 700;
}

.combat-report-table-wrap {
    overflow-x: auto;
}

.combat-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.combat-report-table th,
.combat-report-table td {
    padding: 10px 8px;
    border-top: 1px solid rgba(113, 92, 64, 0.45);
    text-align: right;
}

.combat-report-table th:first-child {
    text-align: left;
}

.combat-report-table thead th {
    color: #9f917b;
    font-size: 10px;
    text-transform: uppercase;
}

.combat-report-table tbody th {
    color: #e4c77a;
    font-weight: 600;
}

.combat-report-table tbody th span {
    margin-right: 6px;
}

.combat-report-losses {
    color: #df7b72;
}

.combat-report-survivors {
    color: #8fcb90;
}

.combat-report-no-units {
    margin: 0;
    padding: 16px;
    border: 1px dashed rgba(113, 92, 64, 0.58);
    color: #a99a83;
    text-align: center;
}

@media (max-width: 900px) {
    .combat-report-participants {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .combat-report-page-header,
    .combat-report-list-heading,
    .combat-report-result,
    .combat-report-participant > header {
        align-items: stretch;
        flex-direction: column;
    }

    .combat-report-list-heading > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .combat-report-route {
        grid-template-columns: 1fr;
    }

    .combat-report-route > div:last-child {
        text-align: left;
    }

    .combat-report-route-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .combat-report-list-summary span:last-child {
        margin-left: 0;
    }

    .combat-report-participant dl {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Truppenbewegungsübersicht */
.troop-overview-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 48px;
}

.troop-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.troop-overview-header h1 {
    margin-bottom: 8px;
}

.troop-overview-header p:last-child {
    max-width: 760px;
    margin: 0;
    color: #b9aa91;
    line-height: 1.55;
}

.troop-overview-header p strong {
    color: #efd171;
}

.troop-overview-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.troop-overview-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(113, 92, 64, 0.7);
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(52, 42, 32, 0.94), rgba(28, 22, 17, 0.96));
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.25);
}

.troop-overview-summary span {
    color: #a99a83;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.troop-overview-summary strong {
    color: #efd171;
    font-size: 20px;
}

.troop-overview-empty,
.troop-overview-group-empty {
    padding: 22px;
    border: 1px dashed rgba(126, 100, 63, 0.72);
    border-radius: 5px;
    background: rgba(31, 25, 19, 0.72);
    color: #a99a83;
    text-align: center;
}

.troop-overview-empty strong {
    color: #ead08a;
}

.troop-overview-empty p,
.troop-overview-group-empty {
    margin: 7px 0 0;
    font-size: 12px;
}

.troop-overview-groups {
    display: grid;
    gap: 18px;
}

.troop-overview-group {
    overflow: hidden;
    border: 1px solid #786246;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(53, 43, 33, 0.97), rgba(27, 22, 17, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.25);
}

.troop-overview-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(113, 92, 64, 0.62);
    background: rgba(18, 14, 11, 0.35);
}

.troop-overview-group > header h2 {
    margin: 0 0 3px;
    color: #efd171;
    font-size: 17px;
}

.troop-overview-group > header p {
    margin: 0;
    color: #a99a83;
    font-size: 11px;
}

.troop-overview-group > header > span {
    min-width: 34px;
    padding: 5px 8px;
    border: 1px solid rgba(198, 157, 64, 0.68);
    border-radius: 999px;
    color: #f0d47c;
    font-weight: 700;
    text-align: center;
}

.troop-overview-group-empty {
    margin: 14px;
}

.troop-overview-list {
    display: grid;
    gap: 1px;
    background: rgba(113, 92, 64, 0.35);
}

.troop-overview-card {
    padding: 16px 18px;
    background: rgba(28, 22, 17, 0.98);
}

.troop-overview-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.troop-overview-card-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.troop-overview-card-heading > div > strong {
    color: #e5cc84;
    font-size: 13px;
}

.troop-overview-card-heading > span {
    color: #b4a58d;
    font-size: 11px;
}

.troop-overview-badge {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid rgba(126, 105, 75, 0.82);
    border-radius: 3px;
    color: #d7c6a5;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.troop-overview-badge-attack {
    border-color: rgba(190, 75, 75, 0.78);
    color: #e49a91;
}

.troop-overview-badge-support {
    border-color: rgba(89, 150, 170, 0.78);
    color: #9ecbd8;
}

.troop-overview-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(113, 92, 64, 0.42);
    border-bottom: 1px solid rgba(113, 92, 64, 0.42);
}

.troop-overview-route > span {
    color: #d4af37;
    font-size: 22px;
}

.troop-overview-route a {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.troop-overview-route a:last-child {
    text-align: right;
}

.troop-overview-route a:hover strong,
.troop-overview-route a:focus-visible strong {
    color: #fff0ad;
    text-decoration: underline;
}

.troop-overview-route small {
    color: #94866f;
    font-size: 9px;
    text-transform: uppercase;
}

.troop-overview-route strong {
    overflow: hidden;
    color: #ead08a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.troop-overview-route a span {
    color: #a99a83;
    font-size: 11px;
}

.troop-overview-progress > div {
    position: relative;
    overflow: hidden;
    height: 24px;
    border: 1px solid rgba(117, 96, 68, 0.82);
    border-radius: 3px;
    background: rgba(10, 8, 6, 0.7);
}

.troop-overview-progress > div > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(to right, rgba(118, 83, 35, 0.76), rgba(198, 157, 64, 0.7));
    transition: width 0.3s linear;
}

.troop-overview-progress em {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
    color: #f4df9a;
    font-size: 11px;
    font-style: normal;
    text-shadow: 0 1px 2px #000;
}

.troop-overview-progress > small {
    display: block;
    margin-top: 7px;
    color: #9f917b;
    font-size: 10px;
}

.troop-overview-units {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.troop-overview-units > span {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 6px;
    min-width: 112px;
    padding: 7px 9px;
    border: 1px solid rgba(113, 92, 64, 0.52);
    border-radius: 4px;
    background: rgba(18, 14, 11, 0.5);
}

.troop-overview-units i {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 19px;
    font-style: normal;
}

.troop-overview-units strong {
    color: #efd171;
    font-size: 12px;
}

.troop-overview-units small {
    color: #9f917b;
    font-size: 9px;
}

.troop-overview-hidden-units {
    margin: 13px 0 0;
    padding: 9px 11px;
    border: 1px dashed rgba(151, 119, 72, 0.62);
    border-radius: 4px;
    color: #b2a187;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .troop-overview-header {
        align-items: stretch;
        flex-direction: column;
    }

    .troop-overview-header .btn {
        align-self: flex-start;
    }

    .troop-overview-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .troop-overview-page {
        width: min(100% - 18px, 1180px);
    }

    .troop-overview-summary {
        grid-template-columns: 1fr;
    }

    .troop-overview-card-heading,
    .troop-overview-group > header {
        align-items: flex-start;
    }

    .troop-overview-card-heading {
        flex-direction: column;
        gap: 7px;
    }

    .troop-overview-route {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .troop-overview-route > span {
        transform: rotate(90deg);
        justify-self: center;
    }

    .troop-overview-route a:last-child {
        text-align: left;
    }
}

/* Unterstützungsmärsche */
.support-button {
    border-color: rgba(77, 142, 164, 0.9);
    background: linear-gradient(to bottom, rgba(65, 124, 145, 0.95), rgba(35, 81, 99, 0.98));
    color: #e4f6fb;
}

.support-button:hover,
.support-button:focus-visible {
    background: linear-gradient(to bottom, rgba(79, 149, 173, 0.98), rgba(43, 94, 114, 0.98));
}

.troop-overview-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.troop-overview-card-stationed {
    background: linear-gradient(to bottom, rgba(24, 38, 42, 0.96), rgba(24, 29, 28, 0.98));
}

.troop-overview-stationed-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(89, 150, 170, 0.58);
    border-radius: 4px;
    background: rgba(24, 52, 62, 0.36);
    color: #a9c7cf;
    font-size: 11px;
}

.troop-overview-stationed-state strong {
    color: #b9e0e8;
}

.troop-overview-stationed-state time {
    color: #e3f1f4;
}

.troop-support-recall-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(89, 150, 170, 0.34);
}

.support-recall-button {
    border-color: rgba(166, 113, 55, 0.85);
    background: linear-gradient(to bottom, rgba(130, 88, 42, 0.96), rgba(79, 50, 25, 0.98));
    color: #f2d7a6;
}

.support-recall-button:hover,
.support-recall-button:focus-visible {
    background: linear-gradient(to bottom, rgba(151, 101, 48, 0.98), rgba(91, 58, 29, 0.98));
}

@media (max-width: 760px) {
    .troop-overview-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .troop-overview-summary {
        grid-template-columns: 1fr;
    }

    .troop-support-recall-form {
        justify-content: stretch;
    }

    .support-recall-button {
        width: 100%;
    }
}

/* Spiel-Dashboard */
.game-dashboard {
    width: min(100% - 34px, 1180px);
    margin: 0 auto;
    padding: 28px 0 48px;
}

.game-dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(147, 116, 71, 0.58);
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(38, 33, 27, 0.98), rgba(25, 23, 20, 0.98));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.game-dashboard-hero h1 {
    margin: 2px 0 6px;
    color: #ead6aa;
    font-size: clamp(24px, 3vw, 34px);
}

.game-dashboard-hero p:last-child {
    margin: 0;
    color: #baa98c;
}

.game-dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.game-dashboard-alerts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.game-dashboard-alert {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid rgba(119, 102, 74, 0.58);
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(37, 35, 31, 0.96), rgba(26, 25, 23, 0.98));
    color: #d7c7a5;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.game-dashboard-alert:hover,
.game-dashboard-alert:focus-visible {
    border-color: rgba(190, 151, 88, 0.85);
    background: linear-gradient(to bottom, rgba(47, 42, 34, 0.98), rgba(30, 28, 24, 0.99));
    transform: translateY(-1px);
}

.game-dashboard-alert.is-danger {
    border-color: rgba(177, 73, 59, 0.9);
    background: linear-gradient(to bottom, rgba(75, 33, 29, 0.96), rgba(42, 24, 22, 0.99));
}

.game-dashboard-alert > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    font-size: 20px;
}

.game-dashboard-alert div {
    display: grid;
    gap: 2px;
}

.game-dashboard-alert small {
    color: #9f927c;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.game-dashboard-alert strong {
    color: #f0dfb8;
    font-size: 20px;
}

.game-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.game-dashboard-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(112, 94, 66, 0.58);
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(34, 32, 29, 0.98), rgba(24, 23, 21, 0.99));
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.18);
}

.game-dashboard-card-wide,
.game-dashboard-card-status {
    grid-column: 1 / -1;
}

.game-dashboard-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(118, 98, 68, 0.35);
}

.game-dashboard-card-header > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.game-dashboard-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(154, 124, 78, 0.48);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 20px;
}

.game-dashboard-card-header h2 {
    margin: 0 0 2px;
    color: #e4d0a4;
    font-size: 17px;
}

.game-dashboard-card-header p {
    margin: 0;
    color: #918671;
    font-size: 11px;
}

.game-dashboard-card-header > a {
    flex: 0 0 auto;
    color: #c8a96d;
    font-size: 11px;
    text-decoration: none;
}

.game-dashboard-card-header > a:hover,
.game-dashboard-card-header > a:focus-visible {
    color: #f0cf8b;
    text-decoration: underline;
}

.game-dashboard-capacity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 15px;
}

.game-dashboard-capacity {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(105, 91, 68, 0.42);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.14);
}

.game-dashboard-capacity > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #aa9c83;
    font-size: 11px;
}

.game-dashboard-capacity strong {
    color: #e1cda2;
}

.game-dashboard-capacity small {
    color: #827866;
    font-size: 10px;
}

.game-dashboard-progress {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 0 0 1px rgba(120, 98, 64, 0.3);
}

.game-dashboard-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to right, #7c5a2d, #c49b51);
    transition: width 0.35s linear;
}

.game-dashboard-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
}

.game-dashboard-resource {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(101, 88, 68, 0.38);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.13);
}

.game-dashboard-resource.is-near-limit {
    border-color: rgba(180, 130, 54, 0.72);
    background: rgba(86, 57, 22, 0.22);
}

.game-dashboard-resource.is-full {
    border-color: rgba(177, 73, 59, 0.86);
    background: rgba(75, 33, 29, 0.3);
}

.game-dashboard-resource > span {
    font-size: 17px;
}

.game-dashboard-resource div {
    min-width: 0;
}

.game-dashboard-resource small,
.game-dashboard-resource strong,
.game-dashboard-resource em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-dashboard-resource small {
    color: #8d826e;
    font-size: 9px;
}

.game-dashboard-resource strong {
    color: #d7c49d;
    font-size: 10px;
}

.game-dashboard-resource em {
    margin-top: 2px;
    color: #8e9d82;
    font-size: 9px;
    font-style: normal;
}

.game-dashboard-action-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.game-dashboard-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(104, 91, 69, 0.42);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.13);
    color: inherit;
    text-decoration: none;
}

.game-dashboard-action:hover,
.game-dashboard-action:focus-visible {
    border-color: rgba(184, 145, 81, 0.76);
    background: rgba(74, 56, 31, 0.18);
}

.game-dashboard-action.is-warning {
    border-color: rgba(180, 130, 54, 0.66);
    background: rgba(86, 57, 22, 0.2);
}

.game-dashboard-action.is-danger {
    border-color: rgba(177, 73, 59, 0.82);
    background: rgba(75, 33, 29, 0.28);
}

.game-dashboard-action-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    font-size: 18px;
}

.game-dashboard-action div {
    min-width: 0;
}

.game-dashboard-action strong,
.game-dashboard-action small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-dashboard-action strong {
    color: #ddcaa1;
    font-size: 11px;
}

.game-dashboard-action small {
    margin-top: 3px;
    color: #8e846f;
    font-size: 9px;
}

.game-dashboard-action time,
.game-dashboard-action > span:last-child {
    color: #d0af6e;
    font-family: monospace;
    font-size: 11px;
}

.game-dashboard-task-list,
.game-dashboard-movement-list,
.game-dashboard-report-list {
    display: grid;
    gap: 9px;
}

.game-dashboard-task {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid rgba(102, 88, 66, 0.42);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.13);
}

.game-dashboard-task.is-waiting {
    border-style: dashed;
    opacity: 0.86;
}

.game-dashboard-task-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.game-dashboard-task-heading > span {
    font-size: 19px;
}

.game-dashboard-task-heading div {
    min-width: 0;
}

.game-dashboard-task-heading strong,
.game-dashboard-task-heading small {
    display: block;
}

.game-dashboard-task-heading strong {
    overflow: hidden;
    color: #ddcaa1;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-dashboard-task-heading small {
    margin-top: 2px;
    color: #847b69;
    font-size: 9px;
}

.game-dashboard-task-heading time,
.game-dashboard-task-state {
    color: #d0af6e;
    font-family: monospace;
    font-size: 11px;
}

.game-dashboard-empty {
    padding: 17px;
    border: 1px dashed rgba(112, 95, 68, 0.46);
    border-radius: 4px;
    text-align: center;
}

.game-dashboard-empty strong {
    color: #cdb88f;
}

.game-dashboard-empty p {
    margin: 5px 0 0;
    color: #817867;
    font-size: 11px;
}

.game-dashboard-movement {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 145px;
    gap: 10px 14px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(104, 91, 69, 0.42);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.13);
}

.game-dashboard-movement.is-danger {
    border-color: rgba(170, 68, 56, 0.78);
    background: rgba(81, 31, 27, 0.22);
}

.game-dashboard-movement > .game-dashboard-progress {
    grid-column: 1 / -1;
}

.game-dashboard-movement-type,
.game-dashboard-movement-time {
    display: grid;
    gap: 2px;
}

.game-dashboard-movement-type span {
    color: #d9c49c;
    font-size: 11px;
    font-weight: 700;
}

.game-dashboard-movement-type small,
.game-dashboard-movement-time small {
    color: #827967;
    font-size: 9px;
}

.game-dashboard-movement-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.game-dashboard-movement-route strong {
    overflow: hidden;
    color: #bfb092;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-dashboard-movement-route strong:last-child {
    text-align: right;
}

.game-dashboard-movement-route span {
    color: #836d49;
}

.game-dashboard-movement-time {
    text-align: right;
}

.game-dashboard-movement-time time {
    color: #d5b36e;
    font-family: monospace;
    font-size: 11px;
}

.game-dashboard-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.game-dashboard-support-grid > div {
    display: grid;
    gap: 3px;
    padding: 13px 12px;
    border: 1px solid rgba(89, 130, 139, 0.45);
    border-radius: 4px;
    background: rgba(27, 56, 62, 0.2);
    text-align: center;
}

.game-dashboard-support-grid span,
.game-dashboard-support-grid small {
    color: #8ba3a6;
    font-size: 9px;
}

.game-dashboard-support-grid strong {
    color: #c1dde0;
    font-size: 22px;
}

.game-dashboard-report {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(104, 90, 67, 0.42);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.13);
    color: inherit;
    text-decoration: none;
}

.game-dashboard-report:hover,
.game-dashboard-report:focus-visible {
    border-color: rgba(184, 145, 81, 0.76);
    background: rgba(74, 56, 31, 0.18);
}

.game-dashboard-report div {
    min-width: 0;
}

.game-dashboard-report strong,
.game-dashboard-report small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-dashboard-report strong {
    color: #d1bf98;
    font-size: 11px;
}

.game-dashboard-report small {
    margin-top: 3px;
    color: #817866;
    font-size: 9px;
}

.game-dashboard-report > span:last-child {
    color: #b99b63;
    font-size: 20px;
}

@media (max-width: 980px) {
    .game-dashboard-alerts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-dashboard-action-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .game-dashboard {
        width: min(100% - 22px, 1180px);
        padding-top: 18px;
    }

    .game-dashboard-hero,
    .game-dashboard-card-header {
        align-items: flex-start;
    }

    .game-dashboard-hero {
        flex-direction: column;
    }

    .game-dashboard-hero-actions {
        justify-content: flex-start;
    }

    .game-dashboard-grid,
    .game-dashboard-capacity-grid {
        grid-template-columns: 1fr;
    }

    .game-dashboard-card-wide,
    .game-dashboard-card-status {
        grid-column: auto;
    }

    .game-dashboard-movement {
        grid-template-columns: 1fr auto;
    }

    .game-dashboard-movement-route {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 520px) {
    .game-dashboard-alerts,
    .game-dashboard-resources,
    .game-dashboard-support-grid,
    .game-dashboard-action-list {
        grid-template-columns: 1fr;
    }

    .game-dashboard-hero,
    .game-dashboard-card {
        padding: 15px;
    }

    .game-dashboard-card-header {
        flex-direction: column;
    }

    .game-dashboard-task-heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .game-dashboard-task-heading time {
        grid-column: 2;
    }

    .game-dashboard-movement {
        grid-template-columns: 1fr;
    }

    .game-dashboard-movement-time {
        text-align: left;
    }

    .game-dashboard-movement-route {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: 1fr;
    }

    .game-dashboard-movement-route strong:last-child {
        text-align: left;
    }

    .game-dashboard-movement-route span {
        transform: rotate(90deg);
        justify-self: center;
    }
}

/* Kampfbericht: transportierte Beute */
.combat-report-loot {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(156, 119, 58, 0.58);
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(68, 49, 22, 0.28), rgba(17, 16, 13, 0.88));
}

.combat-report-loot > header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.combat-report-loot h2 {
    margin: 2px 0 0;
    color: #d8c08f;
}

.combat-report-loot header small,
.combat-report-loot-note {
    color: #8f826b;
    font-size: 10px;
}

.combat-report-loot dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 8px;
    margin: 0;
}

.combat-report-loot dl div {
    padding: 8px 10px;
    border: 1px solid rgba(126, 103, 65, 0.4);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    text-align: center;
}

.combat-report-loot dt {
    color: #81745e;
    font-size: 9px;
    text-transform: uppercase;
}

.combat-report-loot dd {
    margin: 3px 0 0;
    color: #d9bb78;
    font-weight: 700;
}

.combat-report-loot-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.combat-report-loot-grid > div {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 6px;
    border: 1px solid rgba(120, 101, 67, 0.42);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.16);
}

.combat-report-loot-grid span {
    font-size: 20px;
}

.combat-report-loot-grid strong {
    color: #dcc184;
    font-size: 13px;
}

.combat-report-loot-grid small {
    color: #8b806c;
    font-size: 9px;
}

.combat-report-loot-note {
    margin: 12px 0 0;
}

@media (max-width: 760px) {
    .combat-report-loot > header {
        flex-direction: column;
    }

    .combat-report-loot dl {
        width: 100%;
    }

    .combat-report-loot-grid {
        grid-template-columns: repeat(3, minmax(72px, 1fr));
    }
}

@media (max-width: 460px) {
    .combat-report-loot dl,
    .combat-report-loot-grid {
        grid-template-columns: 1fr;
    }
}

.attack-protection-status,
.attack-protection-form-note {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.attack-protection-status {
    margin-top: 1rem;
}

.attack-protection-status strong,
.attack-protection-form-note strong {
    display: block;
    margin-bottom: 0.25rem;
}

.attack-protection-status p,
.attack-protection-form-note span {
    margin: 0;
    line-height: 1.45;
}

.attack-protection-status.is-open {
    border-color: rgba(72, 187, 120, 0.45);
    background: rgba(72, 187, 120, 0.1);
}

.attack-protection-status.is-protected,
.attack-protection-form-note {
    border-color: rgba(236, 201, 75, 0.5);
    background: rgba(236, 201, 75, 0.11);
}

.attack-protection-form-note {
    display: grid;
    gap: 0.15rem;
}

/* Versteck-Snapshot im Kampfbericht */
.combat-report-loot-grid-detailed {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.combat-report-loot-grid-detailed > article {
    padding: 10px;
    border: 1px solid rgba(120, 101, 67, 0.42);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.16);
}

.combat-report-loot-grid-detailed > article > header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #dcc184;
}

.combat-report-loot-grid-detailed > article > header span {
    font-size: 20px;
}

.combat-report-loot-grid-detailed > article > dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    width: 100%;
    margin: 0;
}

.combat-report-loot-grid-detailed > article > dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 7px;
    text-align: left;
}

.combat-report-loot-grid-detailed > article > dl dt,
.combat-report-loot-grid-detailed > article > dl dd {
    margin: 0;
    font-size: 10px;
}

.combat-report-loot-grid-detailed > article > dl dd {
    color: #d9bb78;
    font-weight: 700;
}

/* Adelsangriff */
.noble-attack-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(199, 163, 74, 0.35);
}

.noble-attack-panel header small {
    display: block;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.noble-attack-panel h3 {
    margin: 0 0 0.75rem;
}

.troop-movement-unit-row.is-noble {
    border-color: rgba(199, 163, 74, 0.65);
}

.noble-attack-button {
    width: 100%;
}

.troop-overview-badge-noble_attack {
    border-color: rgba(199, 163, 74, 0.7);
}

.combat-report-noble-effect {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(199, 163, 74, 0.45);
    border-radius: 0.75rem;
}

.combat-report-noble-effect dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0;
}

.combat-report-noble-effect dl div {
    padding: 0.65rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.12);
}

.combat-report-noble-effect dt {
    font-size: 0.78rem;
    opacity: 0.75;
}

.combat-report-noble-effect dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

@media (max-width: 680px) {
    .combat-report-noble-effect dl {
        grid-template-columns: 1fr;
    }
}


/* Weltteilnahme nach dem Verlust des letzten Dorfs */
.lifecycle-page {
    max-width: 1100px;
    margin-inline: auto;
}

.lifecycle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lifecycle-reports-card {
    margin-top: 1rem;
}

.lifecycle-page .status-danger {
    background: rgba(176, 52, 52, 0.14);
    border-color: rgba(176, 52, 52, 0.35);
    color: #8d2525;
}

.lifecycle-page .status-success {
    background: rgba(43, 125, 77, 0.14);
    border-color: rgba(43, 125, 77, 0.35);
    color: #246a43;
}

.lifecycle-page .detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lifecycle-page .detail-list dt {
    font-weight: 600;
}

.lifecycle-page .detail-list dd {
    margin: 0;
    text-align: right;
}

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

/* Aufklärung und Spionageberichte */
.scout-mission-panel {
    border-top-color: rgba(81, 145, 171, 0.45);
}

.troop-movement-unit-row.is-scout {
    border-color: rgba(81, 145, 171, 0.65);
}

.scout-mission-button {
    width: 100%;
}

.troop-overview-badge-scout {
    border-color: rgba(81, 145, 171, 0.72);
}

.scout-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 1rem 0;
}

.scout-report-metrics article,
.scout-intelligence-section {
    padding: 1rem;
    border: 1px solid rgba(81, 145, 171, 0.35);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.035);
}

.scout-report-metrics article {
    display: grid;
    gap: 0.2rem;
}

.scout-report-metrics small,
.scout-report-metrics span,
.scout-intelligence-section header small {
    opacity: 0.75;
}

.scout-report-metrics strong {
    font-size: 1.35rem;
}

.scout-intelligence-section {
    margin-top: 1rem;
}

.scout-intelligence-section header h2 {
    margin: 0.15rem 0 0.8rem;
}

.scout-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.scout-report-grid article {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.12);
}

.scout-report-grid article > span:first-child {
    font-size: 1.25rem;
}

@media (max-width: 680px) {
    .scout-report-metrics {
        grid-template-columns: 1fr;
    }
}

/* Markt und direkte Rohstofftransporte */
.market-page {
    display: grid;
    gap: 1.25rem;
}
.market-capacity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}
.market-stat-card,
.market-panel,
.market-transport-card {
    border: 1px solid rgba(168, 132, 74, .3);
    background: rgba(23, 19, 15, .92);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.market-stat-card {
    padding: 1rem;
    display: grid;
    gap: .3rem;
}
.market-stat-card span { color: #b9aa93; font-size: .82rem; }
.market-stat-card strong { font-size: 1.35rem; }
.market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 1rem;
    align-items: start;
}
.market-panel { padding: 1.1rem; }
.market-panel h2 { margin-top: 0; }
.market-transport-form { display: grid; gap: 1rem; }
.market-transport-form > label { display: grid; gap: .45rem; }
.market-transport-form select,
.market-resource-row input {
    width: 100%;
    border: 1px solid rgba(183, 150, 92, .42);
    border-radius: 8px;
    background: #17130f;
    color: inherit;
    padding: .68rem .75rem;
}
.market-resource-list { display: grid; gap: .5rem; }
.market-resource-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem;
    align-items: center;
    gap: .8rem;
    padding: .65rem .7rem;
    background: rgba(255,255,255,.025);
    border-radius: 8px;
}
.market-resource-row span { display: grid; gap: .18rem; }
.market-resource-row small { color: #a99c89; }
.market-estimate {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    padding: .8rem;
    background: rgba(176, 129, 57, .08);
    border-radius: 8px;
}
.market-transport-list { display: grid; gap: .75rem; }
.market-transport-card { padding: .85rem; }
.market-transport-card header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}
.market-transport-card p { color: #c9bda9; }
.market-payload-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0; }
.market-payload-chips span {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(176, 129, 57, .12);
    border: 1px solid rgba(176, 129, 57, .24);
    font-size: .82rem;
}
.market-target-action { margin-top: .8rem; }
@media (max-width: 900px) {
    .market-capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .market-capacity-grid { grid-template-columns: 1fr; }
    .market-resource-row { grid-template-columns: 1fr; }
}

/* Öffentlicher Handelsmarkt */
.trade-offer-section {
    margin-top: 1.5rem;
}
.trade-offer-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.trade-offer-heading h2 {
    margin: .15rem 0 .35rem;
}
.trade-offer-heading p {
    margin: 0;
}
.trade-offer-limit {
    white-space: nowrap;
    padding: .55rem .75rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .65rem;
    background: rgba(0,0,0,.18);
    font-size: .85rem;
}
.trade-offer-layout {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(360px, 1.25fr);
    gap: 1rem;
    align-items: start;
}
.trade-offer-secondary {
    margin-top: 1rem;
    grid-template-columns: 1fr 1fr;
}
.trade-offer-form {
    display: grid;
    gap: .9rem;
}
.trade-offer-form-grid {
    display: grid;
    grid-template-columns: 1fr minmax(110px, .6fr);
    gap: .75rem;
}
.trade-offer-form label {
    display: grid;
    gap: .35rem;
}
.trade-offer-form select,
.trade-offer-form input {
    width: 100%;
}
.trade-offer-list {
    display: grid;
    gap: .75rem;
}
.trade-offer-card {
    display: grid;
    gap: .5rem;
    padding: .85rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    background: rgba(0,0,0,.14);
}
.trade-offer-card p,
.trade-offer-card small {
    margin: 0;
}
.trade-offer-card.compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.trade-offer-card.compact small {
    grid-column: 1;
}
.trade-offer-card.compact .trade-offer-action {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.trade-offer-exchange {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}
.trade-offer-exchange span {
    opacity: .72;
    font-size: .85rem;
}
.trade-offer-action {
    margin: .15rem 0 0;
}
.trade-offer-history {
    display: grid;
    gap: .55rem;
}
.trade-offer-history > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.trade-offer-history > div:last-child {
    border-bottom: 0;
}
.trade-status {
    display: inline-flex;
    align-items: center;
    padding: .2rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    background: rgba(255,255,255,.1);
}
.trade-status-accepted { background: rgba(77, 181, 119, .18); }
.trade-status-cancelled,
.trade-status-expired { background: rgba(208, 147, 63, .18); }
@media (max-width: 900px) {
    .trade-offer-layout,
    .trade-offer-secondary {
        grid-template-columns: 1fr;
    }
    .trade-offer-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 560px) {
    .trade-offer-form-grid {
        grid-template-columns: 1fr;
    }
    .trade-offer-card.compact {
        grid-template-columns: 1fr;
    }
    .trade-offer-card.compact .trade-offer-action,
    .trade-offer-card.compact small {
        grid-column: 1;
        grid-row: auto;
    }
    .trade-offer-history > div {
        grid-template-columns: 1fr;
    }
}

/* ========== ALLIANZEN ========== */
.alliance-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 18px 50px;
}

.alliance-page-header {
    margin: 0 0 20px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    text-align: left;
    border: 1px solid #8b7355;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(61, 54, 48, 0.96), rgba(26, 20, 16, 0.96));
}

.alliance-page-header h1 {
    margin: 2px 0 8px;
    font-size: clamp(30px, 4vw, 46px);
}

.alliance-page-header p {
    margin: 0;
}

.alliance-tag-badge {
    flex: 0 0 auto;
    padding: 12px 18px;
    border: 1px solid #d4af37;
    border-radius: 5px;
    color: #ffd700;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(212, 175, 55, 0.08);
}

.alliance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
}

.alliance-card {
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(55, 48, 42, 0.96), rgba(32, 27, 23, 0.96));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.alliance-card h2,
.alliance-card h3 {
    margin-top: 0;
    color: #ffd700;
}

.alliance-card h3 {
    margin-top: 22px;
    font-size: 18px;
}

.alliance-profile-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.alliance-profile-title h2 {
    margin: 2px 0 0;
}

.alliance-profile-title > span {
    white-space: nowrap;
    color: #d4af37;
    font-weight: 700;
}

.alliance-description {
    min-height: 48px;
    line-height: 1.6;
}

.alliance-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
}

.alliance-meta div {
    padding: 10px;
    border: 1px solid rgba(139, 115, 85, 0.6);
    background: rgba(0, 0, 0, 0.16);
}

.alliance-meta dt {
    color: #b8860b;
    font-size: 11px;
    text-transform: uppercase;
}

.alliance-meta dd {
    margin: 4px 0 0;
    color: #f0e4c5;
}

.alliance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.alliance-form label,
.alliance-invite-form label {
    display: grid;
    gap: 6px;
    color: #d4af37;
    font-weight: 700;
}

.alliance-form-control,
.alliance-invite-player-field {
    display: grid;
    gap: 6px;
}

.alliance-form-wide,
.alliance-form button {
    grid-column: 1 / -1;
}

.alliance-form input,
.alliance-form textarea,
.alliance-invite-form select,
.alliance-member-actions select {
    width: 100%;
    box-sizing: border-box;
}

.alliance-invite-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

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

.alliance-invitation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(139, 115, 85, 0.65);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.16);
}

.alliance-invitation small {
    display: block;
    margin-top: 4px;
    color: #bdb3a4;
}

.alliance-inline-actions,
.alliance-member-actions,
.alliance-member-actions form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.alliance-member-actions {
    flex-wrap: wrap;
}

.alliance-member-table {
    width: 100%;
    border-collapse: collapse;
}

.alliance-member-table th,
.alliance-member-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.5);
    text-align: left;
    vertical-align: middle;
}

.alliance-member-table th {
    color: #d4af37;
    font-size: 11px;
    text-transform: uppercase;
}

.alliance-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(93, 140, 84, 0.18);
    color: #9fd58f;
}

.alliance-status.is-defeated {
    background: rgba(150, 74, 62, 0.2);
    color: #e4a59a;
}

.alliance-status.is-blocked {
    background: rgba(196, 145, 48, 0.2);
    color: #f0cf83;
}

.alliance-status.is-left {
    background: rgba(120, 120, 120, 0.2);
    color: #c9c9c9;
}

.alliance-activity-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.alliance-activity-heading p {
    margin: -6px 0 16px;
    color: #bdb3a4;
}

.alliance-activity-list {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alliance-activity-list::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 7px;
    width: 1px;
    background: rgba(212, 175, 55, 0.35);
}

.alliance-activity-entry {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
}

.alliance-activity-marker {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin: 6px 0 0 3px;
    border: 2px solid #d4af37;
    border-radius: 50%;
    background: #302820;
}

.alliance-activity-content {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.35);
}

.alliance-activity-entry:last-child .alliance-activity-content {
    border-bottom: 0;
}

.alliance-activity-content p {
    margin: 5px 0 0;
    color: #f0e4c5;
}

.alliance-activity-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #bdb3a4;
    font-size: 12px;
}

.alliance-activity-meta span {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alliance-activity-pagination {
    margin-top: 14px;
    text-align: center;
}

.alliance-danger-zone {
    border-color: rgba(160, 69, 52, 0.8);
}

button.danger,
.btn.danger {
    border-color: #a04534;
    background: rgba(160, 69, 52, 0.18);
    color: #efb0a4;
}

@media (max-width: 1050px) {
    .alliance-layout {
        grid-template-columns: 1fr;
    }

    .alliance-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .alliance-page-header,
    .alliance-invitation,
    .alliance-profile-title {
        align-items: stretch;
        flex-direction: column;
    }

    .alliance-form,
    .alliance-invite-form {
        grid-template-columns: 1fr;
    }

    .alliance-form button {
        grid-column: auto;
    }
}


/* ========== ÖFFENTLICHES ALLIANZPROFIL ========== */
.public-alliance-page {
    padding: 18px 0 32px;
}

.public-alliance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 2px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(69, 57, 45, 0.97), rgba(34, 27, 21, 0.98));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.public-alliance-header h1 {
    margin: 0 0 6px;
    color: #f2d36c;
    font-size: 32px;
}

.public-alliance-header h1 span {
    color: #fff0a7;
}

.public-alliance-header p {
    margin: 0;
    color: #d3c5ad;
    font-size: 14px;
}

.public-alliance-count {
    display: grid;
    min-width: 112px;
    padding: 12px 16px;
    border: 1px solid #8d7046;
    border-radius: 4px;
    background: rgba(20, 16, 12, 0.48);
    text-align: center;
}

.public-alliance-count strong {
    color: #f4d97f;
    font-size: 28px;
}

.public-alliance-count span {
    color: #b9aa91;
    font-size: 11px;
}

.public-alliance-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.45fr);
    gap: 18px;
    align-items: start;
}

.public-alliance-card {
    padding: 18px;
    border: 1px solid #786246;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(55, 45, 35, 0.98), rgba(29, 23, 18, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.38);
}

.public-alliance-card h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #715c40;
    color: #efd171;
    font-size: 18px;
}

.public-alliance-description p,
.public-alliance-privacy-note {
    color: #c9bda4;
    font-size: 13px;
    line-height: 1.6;
}

.public-alliance-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.public-alliance-member-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: auto;
}

.public-alliance-member-table th,
.public-alliance-member-table td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(113, 92, 64, 0.48);
    color: #cfc1a8;
    font-size: 12px;
    text-align: left;
}

.public-alliance-member-table th {
    color: #a9987d;
    font-size: 10px;
    text-transform: uppercase;
}

.public-alliance-member-table strong {
    color: #f0d47c;
}

.public-alliance-member-table th:last-child,
.public-alliance-member-table td:last-child {
    white-space: nowrap;
}

.public-alliance-member-table a {
    color: inherit;
}

.public-alliance-privacy-note {
    margin: 14px 0 0;
    padding: 11px 13px;
    border: 1px solid rgba(120, 98, 70, 0.64);
    border-radius: 4px;
    background: rgba(20, 16, 12, 0.46);
}

.village-target-alliance-link,
.alliance-public-profile-link {
    color: #f0d47c;
}

.village-target-alliance-link:hover,
.village-target-alliance-link:focus-visible {
    color: #fff1ac;
}

.alliance-public-profile-link {
    display: inline-flex;
    margin-top: 14px;
}

@media (max-width: 820px) {
    .public-alliance-header {
        align-items: stretch;
        flex-direction: column;
    }

    .public-alliance-count {
        align-self: flex-start;
    }

    .public-alliance-layout {
        grid-template-columns: 1fr;
    }
}


/* ========== ALLIANZVERZEICHNIS ========== */
.alliance-directory-page {
    padding: 18px 0 32px;
}

.alliance-directory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 2px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(69, 57, 45, 0.97), rgba(34, 27, 21, 0.98));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.alliance-directory-header h1 {
    margin: 0 0 6px;
    color: #f2d36c;
    font-size: 32px;
}

.alliance-directory-header p {
    margin: 0;
    color: #d3c5ad;
}

.alliance-directory-header-actions,
.alliance-page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.alliance-directory-search {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #786246;
    border-radius: 5px;
    background: rgba(38, 30, 23, 0.94);
}

.alliance-directory-search label {
    display: block;
    margin-bottom: 7px;
    color: #d9c99f;
    font-size: 12px;
    font-weight: 700;
}

.alliance-directory-search > div {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
}

.alliance-directory-search input {
    min-width: 0;
}

.alliance-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.alliance-directory-card,
.alliance-directory-empty {
    padding: 18px;
    border: 1px solid #786246;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(55, 45, 35, 0.98), rgba(29, 23, 18, 0.98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.38);
}

.alliance-directory-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(113, 92, 64, 0.55);
}

.alliance-directory-card-heading small {
    color: #fff0a7;
    font-weight: 700;
}

.alliance-directory-card-heading h2,
.alliance-directory-empty h2 {
    margin: 2px 0 0;
    color: #efd171;
}

.alliance-directory-card-heading time {
    color: #a9987d;
    font-size: 11px;
    white-space: nowrap;
}

.alliance-directory-card > p,
.alliance-directory-empty p {
    min-height: 42px;
    color: #c9bda4;
    font-size: 13px;
    line-height: 1.55;
}

.alliance-directory-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.alliance-directory-stats div {
    padding: 9px;
    border: 1px solid rgba(120, 98, 70, 0.65);
    border-radius: 4px;
    background: rgba(20, 16, 12, 0.42);
    text-align: center;
}

.alliance-directory-stats dt {
    color: #a9987d;
    font-size: 10px;
    text-transform: uppercase;
}

.alliance-directory-stats dd {
    margin: 3px 0 0;
    color: #f0d47c;
    font-size: 18px;
    font-weight: 700;
}

.alliance-directory-profile-link {
    display: inline-flex;
}

.alliance-directory-pagination {
    margin-top: 18px;
    text-align: center;
}

@media (max-width: 820px) {
    .alliance-directory-header {
        align-items: stretch;
        flex-direction: column;
    }

    .alliance-directory-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .alliance-directory-search > div {
        grid-template-columns: 1fr;
    }

    .alliance-directory-stats {
        grid-template-columns: 1fr;
    }
}

/* Allianz-Bewerbungen */
.alliance-application-public-box,
.alliance-application-own-card,
.alliance-application-review-card {
    margin-top: 1rem;
}
.alliance-application-public-box {
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .75rem;
    background: rgba(0,0,0,.12);
}
.alliance-application-public-box form,
.alliance-application-withdraw-form {
    margin-top: .75rem;
}
.alliance-application-heading,
.alliance-application-entry {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.alliance-application-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}
.alliance-application-entry {
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .7rem;
}
.alliance-application-entry small {
    display: block;
    margin-top: .25rem;
    opacity: .75;
}
.alliance-application-pagination {
    margin-top: 1rem;
}
@media (max-width: 720px) {
    .alliance-application-heading,
    .alliance-application-entry {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Allianz-Diplomatie */
.alliance-diplomacy-page .alliance-hero,
.alliance-diplomacy-grid,
.alliance-diplomacy-entry,
.alliance-diplomacy-form,
.public-alliance-relations li {
    display: flex;
    gap: 1rem;
}
.alliance-diplomacy-page .alliance-hero,
.alliance-diplomacy-entry,
.public-alliance-relations li {
    align-items: center;
    justify-content: space-between;
}
.alliance-diplomacy-grid {
    align-items: flex-start;
    flex-wrap: wrap;
}
.alliance-diplomacy-grid > .alliance-card {
    flex: 1 1 22rem;
}
.alliance-diplomacy-list,
.public-alliance-relations {
    display: grid;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.alliance-diplomacy-entry,
.public-alliance-relations li {
    border: 1px solid var(--border-color, #d7d0c3);
    border-radius: .6rem;
    padding: .85rem 1rem;
}
.alliance-relation-type {
    display: inline-block;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .35rem;
    padding: .2rem .55rem;
}
.alliance-relation-type.is-alliance {
    background: #e6f1ff;
}
.alliance-relation-type.is-non_aggression_pact {
    background: #f3edda;
}
.alliance-diplomacy-form {
    align-items: end;
    flex-wrap: wrap;
}
.alliance-diplomacy-form label {
    flex: 1 1 15rem;
}
@media (max-width: 720px) {
    .alliance-diplomacy-page .alliance-hero,
    .alliance-diplomacy-entry,
    .public-alliance-relations li {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ========== ALLIANZ: KOMPAKTE AKTIONSBUTTONS ========== */
.alliance-page button,
.alliance-page .btn,
.public-alliance-page button,
.public-alliance-page .btn,
.alliance-directory-page button,
.alliance-directory-page .btn {
    box-sizing: border-box;
    display: inline-flex;
    width: auto;
    max-width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
}

.alliance-inline-actions button,
.alliance-member-actions button,
.alliance-application-entry button,
.alliance-diplomacy-entry button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
}

.alliance-page-header-actions,
.alliance-directory-header-actions,
.public-alliance-actions,
.alliance-actions,
.alliance-inline-actions,
.alliance-member-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.alliance-form button {
    width: auto;
    justify-self: start;
}

.alliance-profile-card > .btn {
    margin: 14px 8px 0 0;
}

.alliance-application-public-box form,
.alliance-application-withdraw-form,
.alliance-diplomacy-entry form {
    margin-bottom: 0;
}

@media (max-width: 520px) {
    .alliance-page button,
    .alliance-page .btn,
    .public-alliance-page button,
    .public-alliance-page .btn,
    .alliance-directory-page button,
    .alliance-directory-page .btn {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .alliance-page-header-actions,
    .alliance-directory-header-actions,
    .public-alliance-actions,
    .alliance-actions {
        align-items: stretch;
    }
}

/* ========== APP-EIGENE BESTÄTIGUNGSDIALOGE ========== */
.app-confirm-dialog {
    width: min(92vw, var(--ci-modal-inline-size, 32rem));
    max-width: var(--ci-modal-inline-size, 32rem);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #f0e4c5;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
}


.app-confirm-dialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    transform: translate(-50%, -50%);
}

.app-confirm-dialog::backdrop {
    background: rgba(10, 8, 6, 0.76);
    backdrop-filter: blur(2px);
}

.app-confirm-dialog-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    margin: 0;
    padding: 22px;
    border: 2px solid #d4af37;
    border-radius: 8px;
    background: linear-gradient(to bottom, #342d27, #1f1a16);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55);
}

.app-confirm-dialog-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #a04534;
    border-radius: 50%;
    background: rgba(160, 69, 52, 0.2);
    color: #efb0a4;
    font-size: 24px;
    font-weight: 700;
}

.app-confirm-dialog-content h2 {
    margin: 0 0 8px;
    color: #ffd700;
    font-size: 21px;
}

.app-confirm-dialog-content p {
    margin: 0;
    color: #e2d7bd;
}

.app-confirm-dialog-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.app-confirm-dialog-actions button {
    width: auto;
    min-width: 120px;
    margin: 0;
    padding: 8px 14px;
    text-transform: none;
    white-space: nowrap;
}

.village-selection-error[hidden] {
    display: none;
}

.village-selection-error {
    margin: 0 0 12px;
}

@media (max-width: 520px) {
    .app-confirm-dialog-panel {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .app-confirm-dialog-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .app-confirm-dialog-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app-confirm-dialog-actions button {
        width: 100%;
    }
}



/* Diplomatisch friedlich gestellte Angriffe, Adelsangriffe und Aufklärungen. */
.troop-overview-diplomacy-note,
.troop-movement-diplomacy-note {
    display: block;
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(89, 130, 166, 0.55);
    border-radius: 6px;
    background: rgba(89, 130, 166, 0.12);
    line-height: 1.35;
}

/* Mehrseitige Bündnisverbünde und einstimmige Aufnahmeabstimmungen. */
.alliance-page .alliance-pact-entry {
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.alliance-page .alliance-pact-entry > div:first-child {
  min-width: min(100%, 360px);
  flex: 1 1 360px;
}

.alliance-page .alliance-pact-members,
.alliance-page .alliance-pact-votes {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.alliance-page .alliance-pact-members li,
.alliance-page .alliance-pact-votes li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
}

.alliance-page .alliance-pact-admission-form {
  flex: 1 1 300px;
  max-width: 430px;
  align-self: stretch;
}

.alliance-page .alliance-pact-vote-entry {
  align-items: flex-start;
}

@media (max-width: 640px) {
  .alliance-page .alliance-pact-members li,
  .alliance-page .alliance-pact-votes li {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .alliance-page .alliance-pact-admission-form {
    max-width: none;
    width: 100%;
  }
}

/* Versionierte Diplomatieverträge und einstimmige Vertragsentscheidungen */
.alliance-contract-consensus-form {
    align-self: stretch;
    min-width: min(100%, 270px);
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alliance-contract-consensus-form label {
    min-width: min(100%, 220px);
}

.alliance-contract-consensus-form select {
    width: 100%;
}

@media (max-width: 720px) {
    .alliance-contract-consensus-form {
        min-width: 100%;
    }
}

/* Mehrseitiges Kriegssystem */
.alliance-relation-type.is-war {
    background: rgba(150, 30, 30, 0.18);
    border-color: rgba(185, 55, 55, 0.62);
    color: #ffd2d2;
}

.alliance-war-entry {
    border-color: rgba(185, 55, 55, 0.38);
}

.alliance-war-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.alliance-war-sides > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.alliance-war-declaration-form {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(185, 55, 55, 0.32);
}

.alliance-war-section button.danger {
    background: #8b2020;
    border-color: #b74444;
}

@media (max-width: 720px) {
    .alliance-war-sides {
        grid-template-columns: 1fr;
    }
}

.alliance-war-history-entry { align-items: flex-start; }
.public-alliance-war-history { grid-column: 1 / -1; }
.alliance-war-history-entry .alliance-war-sides { margin-top: .75rem; }

/* ========== ALLIANZ-DIPLOMATIE: KOMPAKTE AKTIVE KRIEGSVERWALTUNG ========== */
.alliance-diplomacy-page .alliance-war-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    padding: 14px;
}

.alliance-war-overview {
    min-width: 0;
}

.alliance-war-overview h3 {
    margin: 0 0 4px;
}

.alliance-war-meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.78;
}

.alliance-diplomacy-page .alliance-war-sides {
    gap: 10px;
    margin-top: 10px;
}

.alliance-diplomacy-page .alliance-war-sides > div {
    padding: 10px;
}

.alliance-war-side-title {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.alliance-diplomacy-page .alliance-war-sides .alliance-pact-members {
    gap: 4px;
    margin-top: 0;
}

.alliance-diplomacy-page .alliance-war-sides .alliance-pact-members li {
    min-width: 0;
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1.25;
}

.alliance-diplomacy-page .alliance-war-sides .alliance-pact-members a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.alliance-war-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    align-items: start;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(185, 55, 55, 0.24);
}

.alliance-diplomacy-page .alliance-war-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.12);
}

.alliance-diplomacy-page .alliance-war-action-card h4 {
    margin: 0;
    color: #f2d47a;
    font-size: 14px;
    line-height: 1.2;
}

.alliance-diplomacy-page .alliance-war-action-card label {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: none;
}

.alliance-diplomacy-page .alliance-war-action-card select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 7px 30px 7px 9px;
    border-width: 1px;
    font-size: 12px;
    line-height: 1.2;
}

.alliance-diplomacy-page .alliance-war-action-card button {
    justify-self: start;
    width: auto;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: normal;
}

.alliance-war-action-help {
    min-width: 0;
    color: #cfc4ae;
    font-size: 11px;
    line-height: 1.35;
}

.alliance-war-action-help summary {
    width: fit-content;
    cursor: pointer;
    color: #cdbb84;
    font-weight: 700;
}

.alliance-war-action-help p {
    margin: 6px 0 0;
}

.alliance-diplomacy-page .alliance-war-surrender-form {
    border-color: rgba(185, 55, 55, 0.32);
    background: rgba(120, 24, 24, 0.08);
}

@media (max-width: 720px) {
    .alliance-diplomacy-page .alliance-war-entry {
        gap: 12px;
        padding: 12px;
    }

    .alliance-war-actions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    }
}

@media (max-width: 480px) {
    .alliance-war-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .alliance-diplomacy-page .alliance-war-action-card button {
        justify-self: stretch;
        width: 100%;
    }
}

/* ========== BENACHRICHTIGUNGEN ========== */
.navbar-notification-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.navbar-notification-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #a92f2f;
    color: #fff4dc;
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(255, 244, 220, 0.28);
}

.navbar-menu a.active .navbar-notification-badge {
    background: #6e1d1d;
    color: #fff;
}

.notification-page {
    max-width: 980px;
}

.notification-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.notification-page-header h1 {
    margin-bottom: 2px;
}

.notification-page-header p {
    color: #c8bda9;
}

.notification-page-header .btn,
.notification-entry .btn,
.notification-page .pagination-link .btn {
    width: auto;
    padding: 8px 14px;
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
}

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

.notification-entry,
.notification-empty {
    border: 1px solid #8b7355;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(61, 54, 48, 0.96), rgba(42, 37, 32, 0.96));
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.34);
}

.notification-entry {
    min-width: 0;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.notification-entry.is-unread {
    border-left: 5px solid #d4af37;
    background: linear-gradient(to bottom, rgba(72, 62, 48, 0.98), rgba(46, 40, 31, 0.98));
}

.notification-entry.is-read {
    opacity: 0.82;
}

.notification-entry-main {
    min-width: 0;
}

.notification-entry-main p {
    margin: 5px 0 0;
    color: #e2d8c5;
    overflow-wrap: anywhere;
}

.notification-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: #b9ad98;
    font-size: 11px;
}

.notification-category,
.notification-unread-label {
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.notification-category {
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #e0c66a;
}

.notification-unread-label {
    background: #8a2828;
    color: #fff1dc;
}

.notification-open-form {
    flex: 0 0 auto;
    margin: 0;
}

.notification-empty {
    padding: 22px;
    text-align: center;
}

.notification-empty h2 {
    margin-bottom: 6px;
}

.notification-empty p {
    color: #c8bda9;
}

.notification-page .pagination-link {
    margin-top: 16px;
    text-align: center;
}

@media (max-width: 680px) {
    .notification-page-header,
    .notification-entry {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-page-header form,
    .notification-page-header .btn,
    .notification-open-form,
    .notification-entry .btn {
        width: 100%;
    }
}

/* ========== ALLIANZ-DIPLOMATIE: KOMPAKTER VERTRAGSVORSCHLAG ========== */
.alliance-diplomacy-proposal-card > h2 {
    margin-bottom: 10px;
}

.alliance-diplomacy-page .alliance-diplomacy-proposal-form {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(150px, .8fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px 10px;
    margin: 0;
}

.alliance-diplomacy-page .alliance-diplomacy-proposal-form > label {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
}

.alliance-diplomacy-page .alliance-diplomacy-proposal-form > label[hidden] {
    display: none !important;
}

.alliance-diplomacy-page .alliance-diplomacy-proposal-form select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 7px 30px 7px 9px;
    font-size: 12px;
    line-height: 1.2;
}

.alliance-diplomacy-page .alliance-diplomacy-proposal-form > button {
    align-self: end;
    justify-self: start;
    min-height: 32px;
    padding: 6px 11px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.alliance-diplomacy-proposal-help {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    color: #cfc4ae;
    font-size: 11px;
    line-height: 1.35;
}

.alliance-diplomacy-proposal-help summary {
    width: fit-content;
    cursor: pointer;
    color: #cdbb84;
    font-weight: 700;
}

.alliance-diplomacy-proposal-help p {
    margin: 6px 0 0;
}

@media (max-width: 980px) {
    .alliance-diplomacy-page .alliance-diplomacy-proposal-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .alliance-diplomacy-page .alliance-diplomacy-proposal-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .alliance-diplomacy-page .alliance-diplomacy-proposal-form > button {
        justify-self: stretch;
        width: 100%;
    }
}

/* Allianzprestige */
.alliance-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-alliance-header-stats {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.alliance-directory-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 820px) {
    .alliance-meta,
    .alliance-directory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-alliance-header-stats {
        width: 100%;
    }

    .public-alliance-count {
        flex: 1;
    }
}

@media (max-width: 620px) {
    .alliance-meta,
    .alliance-directory-stats {
        grid-template-columns: 1fr;
    }

    .public-alliance-header-stats {
        flex-direction: column;
    }
}

/* ========== ALLIANZ-DIPLOMATIE: KOMPAKTE KRIEGSERKLÄRUNG ========== */
.alliance-diplomacy-page .alliance-war-declaration-form {
    display: grid;
    grid-template-columns: minmax(360px, 1.25fr) minmax(250px, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(185, 55, 55, 0.32);
    border-radius: 7px;
    background: rgba(120, 24, 24, 0.07);
}

.alliance-war-declaration-main {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(190px, 1fr);
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.alliance-war-declaration-copy {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.alliance-war-declaration-copy strong {
    color: #f2d47a;
    font-size: 13px;
    line-height: 1.2;
}

.alliance-war-declaration-copy small {
    color: #cfc4ae;
    font-size: 10px;
    line-height: 1.25;
}

.alliance-diplomacy-page .alliance-war-declaration-target {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
}

.alliance-diplomacy-page .alliance-war-declaration-target select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 7px 30px 7px 9px;
    border-width: 1px;
    font-size: 12px;
    line-height: 1.2;
}

.alliance-war-declaration-hint {
    align-self: center;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    opacity: .82;
}

.alliance-diplomacy-page .alliance-war-declaration-submit {
    justify-self: end;
    min-height: 32px;
    margin: 0;
    padding: 6px 11px;
    font-size: 11px;
}

@media (max-width: 980px) {
    .alliance-diplomacy-page .alliance-war-declaration-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .alliance-war-declaration-hint {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 620px) {
    .alliance-diplomacy-page .alliance-war-declaration-form {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .alliance-war-declaration-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .alliance-war-declaration-hint {
        grid-column: auto;
        grid-row: auto;
    }

    .alliance-diplomacy-page .alliance-war-declaration-submit {
        justify-self: stretch;
        width: 100%;
    }
}

/* ========== ALLIANZERFAHRUNG UND ALLIANZLEVEL ========== */
.alliance-experience-panel,
.public-alliance-experience-card {
    display: grid;
    gap: 10px;
}

.alliance-experience-panel {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(205, 187, 132, .32);
    border-radius: 8px;
    background: rgba(205, 187, 132, .055);
}

.alliance-experience-heading,
.alliance-experience-details,
.alliance-experience-contribution {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.alliance-experience-heading > div {
    display: grid;
    gap: 2px;
}

.alliance-experience-heading small {
    color: #cfc4ae;
}

.alliance-experience-heading strong,
.alliance-experience-heading h2 {
    margin: 0;
    color: #f2d47a;
}

.alliance-experience-heading > span {
    white-space: nowrap;
    font-weight: 700;
}

.alliance-experience-track {
    overflow: hidden;
    height: 12px;
    border: 1px solid rgba(205, 187, 132, .3);
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
}

.alliance-experience-track > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #8e742f, #f2d47a);
}

.alliance-experience-details,
.alliance-experience-contribution {
    color: #cfc4ae;
    font-size: 12px;
    line-height: 1.4;
}

.alliance-experience-contribution {
    padding-top: 8px;
    border-top: 1px solid rgba(205, 187, 132, .16);
}

@media (max-width: 620px) {
    .alliance-experience-heading,
    .alliance-experience-details,
    .alliance-experience-contribution {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

.alliance-level-rewards {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alliance-level-rewards-heading,
.alliance-level-reward-entry,
.alliance-level-reward-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.alliance-level-rewards-heading small {
    display: block;
    opacity: 0.72;
    margin-bottom: 2px;
}

.alliance-level-reward-status {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.alliance-level-reward-status.is-disabled {
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.78;
}

.alliance-level-reward-status.is-enabled {
    background: rgba(94, 198, 126, 0.16);
}

.alliance-level-reward-entry {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
}

.alliance-level-reward-entry p,
.alliance-level-reward-note {
    margin: 4px 0 0;
    opacity: 0.74;
    font-size: 0.88rem;
}

.alliance-level-reward-entry.is-inactive {
    opacity: 0.82;
}

.alliance-level-reward-values {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.alliance-level-reward-values span {
    font-size: 0.78rem;
    opacity: 0.72;
}

@media (max-width: 720px) {
    .alliance-level-rewards-heading,
    .alliance-level-reward-entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .alliance-level-reward-values {
        align-items: flex-start;
    }
}

/* ========== ALLIANZPROFILRAHMEN ========== */
.alliance-profile-frame {
    position: relative;
    isolation: isolate;
}

.alliance-profile-frame::after {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
}

.alliance-profile-frame.alliance-profile-frame--bronze {
    border-color: #a96f3f;
    box-shadow: inset 0 0 22px rgba(122, 70, 30, 0.24), 0 7px 18px rgba(0, 0, 0, 0.42);
}

.alliance-profile-frame.alliance-profile-frame--bronze::after {
    border-color: rgba(220, 145, 83, 0.24);
}

.alliance-profile-frame.alliance-profile-frame--silver {
    border-color: #b9c1ca;
    box-shadow: inset 0 0 22px rgba(188, 198, 210, 0.18), 0 7px 20px rgba(0, 0, 0, 0.44);
}

.alliance-profile-frame.alliance-profile-frame--silver::after {
    border-color: rgba(232, 238, 244, 0.28);
}

.alliance-profile-frame.alliance-profile-frame--gold {
    border-color: #d7b64f;
    box-shadow: inset 0 0 25px rgba(218, 177, 55, 0.22), 0 0 14px rgba(213, 173, 56, 0.16), 0 8px 22px rgba(0, 0, 0, 0.46);
}

.alliance-profile-frame.alliance-profile-frame--gold::after {
    border-color: rgba(255, 225, 120, 0.34);
}

.alliance-profile-frame.alliance-profile-frame--diamond {
    border-color: #9fdcea;
    box-shadow: inset 0 0 28px rgba(116, 207, 231, 0.22), 0 0 16px rgba(154, 225, 242, 0.2), 0 9px 24px rgba(0, 0, 0, 0.48);
}

.alliance-profile-frame.alliance-profile-frame--diamond::after {
    border-color: rgba(218, 249, 255, 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 28%, transparent 72%, rgba(154, 225, 242, 0.055));
}

.alliance-profile-frame-badge {
    display: inline-flex;
    width: max-content;
    margin-top: 7px;
    padding: 3px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: #d9c9a5;
    background: rgba(15, 12, 9, 0.48);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}

.alliance-profile-frame--bronze .alliance-profile-frame-badge { color: #d7965f; }
.alliance-profile-frame--silver .alliance-profile-frame-badge { color: #d8e0e7; }
.alliance-profile-frame--gold .alliance-profile-frame-badge { color: #f2d56e; }
.alliance-profile-frame--diamond .alliance-profile-frame-badge { color: #c7f4ff; }

.alliance-profile-frame-tier-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.alliance-profile-frame-tier-list span {
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.alliance-profile-frame-tier-list .is-bronze { color: #d7965f; }
.alliance-profile-frame-tier-list .is-silver { color: #d8e0e7; }
.alliance-profile-frame-tier-list .is-gold { color: #f2d56e; }
.alliance-profile-frame-tier-list .is-diamond { color: #c7f4ff; }

.alliance-directory-stats {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

@media (max-width: 520px) {
    .alliance-profile-frame::after {
        inset: 3px;
    }

    .alliance-profile-frame-tier-list span {
        white-space: normal;
    }
}

/* ========== ALLIANZERFAHRUNGS- UND BEITRAGSSTATISTIK ========== */
.alliance-experience-statistics-card {
    display: grid;
    gap: 16px;
}

.alliance-experience-statistics-heading,
.alliance-experience-subheading,
.alliance-experience-source-entry,
.alliance-experience-history-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.alliance-experience-statistics-heading h2,
.alliance-experience-subheading h3 {
    margin: 0;
}

.alliance-experience-statistics-heading p:last-child {
    max-width: 720px;
    margin: 5px 0 0;
    color: #cfc4ae;
    font-size: 0.88rem;
    line-height: 1.45;
}

.alliance-experience-statistics-own {
    display: grid;
    min-width: 150px;
    gap: 3px;
    justify-items: end;
    padding: 10px 12px;
    border: 1px solid rgba(205, 187, 132, .24);
    border-radius: 8px;
    background: rgba(205, 187, 132, .06);
}

.alliance-experience-statistics-own small,
.alliance-experience-subheading small,
.alliance-experience-source-entry small,
.alliance-experience-history-list small {
    color: #cfc4ae;
    font-size: 0.78rem;
}

.alliance-experience-statistics-own strong {
    color: #f2d47a;
    font-size: 1.05rem;
}

.alliance-experience-statistics-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.alliance-experience-statistics-summary article {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(0, 0, 0, .14);
}

.alliance-experience-statistics-summary small {
    color: #cfc4ae;
}

.alliance-experience-statistics-summary strong {
    color: #f2d47a;
}

.alliance-experience-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.alliance-experience-source-entry {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(0, 0, 0, .1);
}

.alliance-experience-source-entry > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.alliance-experience-source-entry > span {
    white-space: nowrap;
    color: #e6d6a6;
    font-weight: 700;
    font-size: 0.85rem;
}

.alliance-experience-statistics-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    gap: 16px;
    align-items: start;
}

.alliance-experience-statistics-columns > section {
    min-width: 0;
}

.alliance-experience-subheading {
    margin-bottom: 9px;
}

.alliance-experience-leaderboard {
    width: 100%;
    min-width: 560px;
}

.alliance-experience-leaderboard th:not(:nth-child(2)),
.alliance-experience-leaderboard td:not(:nth-child(2)) {
    text-align: right;
}

.alliance-experience-leaderboard th:first-child,
.alliance-experience-leaderboard td:first-child {
    width: 56px;
    text-align: left;
}

.alliance-experience-leaderboard tr.is-current-user td {
    background: rgba(242, 212, 122, .07);
}

.alliance-experience-history-list {
    display: grid;
    gap: 7px;
}

.alliance-experience-history-list article {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(0, 0, 0, .11);
}

.alliance-experience-history-list article > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.alliance-experience-history-list article > span {
    white-space: nowrap;
    color: #f2d47a;
    font-weight: 700;
}

.alliance-experience-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #cfc4ae;
}

@media (max-width: 980px) {
    .alliance-experience-statistics-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alliance-experience-statistics-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .alliance-experience-statistics-heading,
    .alliance-experience-subheading,
    .alliance-experience-source-entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .alliance-experience-statistics-own {
        width: 100%;
        justify-items: start;
    }

    .alliance-experience-statistics-summary,
    .alliance-experience-source-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .alliance-experience-source-entry > span {
        white-space: normal;
    }
}

/* ========== ÖFFENTLICHE ALLIANZRANGLISTE ========== */
.alliance-ranking-page {
    display: grid;
    gap: 18px;
}

.alliance-ranking-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.alliance-ranking-header h1 {
    margin: 0 0 6px;
}

.alliance-ranking-header p:last-child {
    max-width: 760px;
    margin: 0;
    color: #cfc4ae;
}

.alliance-ranking-header-actions,
.alliance-ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alliance-ranking-tabs {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(0, 0, 0, .13);
}

.alliance-ranking-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(0, 0, 0, .12);
}

.alliance-ranking-table {
    width: 100%;
    min-width: 820px;
    margin: 0;
}

.alliance-ranking-table th,
.alliance-ranking-table td {
    vertical-align: middle;
}

.alliance-ranking-table th:not(:nth-child(2)),
.alliance-ranking-table td:not(:nth-child(2)) {
    text-align: right;
}

.alliance-ranking-table th:first-child,
.alliance-ranking-table td:first-child {
    width: 78px;
    text-align: left;
}

.alliance-ranking-alliance {
    min-width: 240px;
}

.alliance-ranking-name {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.alliance-ranking-name small {
    color: #d3bd78;
    font-size: .78rem;
}

.alliance-ranking-name:hover span,
.alliance-ranking-name:focus-visible span {
    text-decoration: underline;
}

.alliance-ranking-alliance .alliance-profile-frame-badge {
    margin-top: 5px;
}

.alliance-ranking-action {
    width: 100px;
}

.alliance-ranking-pagination {
    display: flex;
    justify-content: center;
}

.alliance-ranking-empty {
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 10px;
    text-align: center;
}

.alliance-ranking-empty h2 {
    margin-top: 0;
}

.alliance-ranking-page button,
.alliance-ranking-page .btn {
    min-height: 40px;
}

@media (max-width: 760px) {
    .alliance-ranking-header {
        flex-direction: column;
    }

    .alliance-ranking-header-actions {
        width: 100%;
    }

    .alliance-ranking-table {
        min-width: 0;
    }

    .alliance-ranking-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .alliance-ranking-table,
    .alliance-ranking-table tbody,
    .alliance-ranking-table tr,
    .alliance-ranking-table td {
        display: block;
        width: 100%;
    }

    .alliance-ranking-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .alliance-ranking-table tr:last-child {
        border-bottom: 0;
    }

    .alliance-ranking-table td,
    .alliance-ranking-table td:first-child,
    .alliance-ranking-table td:not(:nth-child(2)) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        width: auto;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .alliance-ranking-table td::before {
        content: attr(data-label);
        color: #cfc4ae;
        text-align: left;
        font-size: .76rem;
    }

    .alliance-ranking-table .alliance-ranking-alliance {
        grid-column: 1 / -1;
        display: block;
        min-width: 0;
        text-align: left;
    }

    .alliance-ranking-table .alliance-ranking-alliance::before {
        display: block;
        margin-bottom: 4px;
    }

    .alliance-ranking-action {
        grid-column: 1 / -1;
        display: block !important;
        text-align: left !important;
    }

    .alliance-ranking-action::before {
        display: none;
    }

    .alliance-ranking-action .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .alliance-ranking-tabs .btn,
    .alliance-ranking-header-actions .btn {
        flex: 1 1 100%;
    }

    .alliance-ranking-table tr {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========== PROJEKTWEITE UI-KONSOLIDIERUNG ========== */
:root {
    --ui-page-max: 1180px;
    --ui-page-wide: 1280px;
    --ui-page-narrow: 900px;
    --ui-page-auth: 520px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 32px;
    --ui-radius-small: 4px;
    --ui-radius: 6px;
    --ui-radius-large: 9px;
    --ui-control-height: 40px;
    --ui-font-small: 12px;
    --ui-font-body: 14px;
    --ui-font-title: clamp(26px, 2.2vw, 34px);
    --ui-font-section: clamp(18px, 1.45vw, 22px);
    --ui-font-subsection: 16px;
    --ui-border: #8b7355;
    --ui-surface-top: rgba(61, 54, 48, 0.98);
    --ui-surface-bottom: rgba(35, 29, 23, 0.98);
    --ui-surface-muted: rgba(26, 20, 16, 0.62);
    --ui-text: #e2d8c5;
    --ui-text-muted: #c8bda9;
    --ui-accent: #f2d36c;
}

body {
    font-size: var(--ui-font-body);
}

.app-page {
    width: min(var(--ui-page-max), calc(100% - 32px));
    max-width: none;
    margin: 22px auto 48px;
    padding-inline: 0;
}

.app-page--wide {
    width: min(var(--ui-page-wide), calc(100% - 32px));
}

.app-page--narrow {
    width: min(var(--ui-page-narrow), calc(100% - 32px));
}

.app-page--auth {
    width: min(var(--ui-page-auth), calc(100% - 32px));
    margin-top: clamp(28px, 6vh, 60px);
}

.app-page-header {
    min-width: 0;
    min-height: 0;
    margin: 0 0 18px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: linear-gradient(to bottom, var(--ui-surface-top), var(--ui-surface-bottom));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.34), 0 6px 18px rgba(0, 0, 0, 0.34);
    text-align: left;
}

.app-page-header > :first-child {
    min-width: 0;
}

.app-page-header h1 {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    color: var(--ui-accent);
    font-size: var(--ui-font-title);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.72);
}

.app-page-header h2,
.app-page-header h3 {
    margin-top: 0;
}

.app-page-header p,
.app-page-header p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-body);
    font-style: normal;
    line-height: 1.5;
}

.app-page-header small,
.app-page-header .eyebrow,
.app-page-header .world-map-kicker {
    font-size: 11px;
    line-height: 1.3;
}

.app-page:not(.app-page--classic) h2 {
    font-size: var(--ui-font-section);
    line-height: 1.25;
}

.app-page:not(.app-page--classic) h3 {
    font-size: var(--ui-font-subsection);
    line-height: 1.3;
}

.app-page:not(.app-page--classic) p,
.app-page:not(.app-page--classic) li,
.app-page:not(.app-page--classic) dd,
.app-page:not(.app-page--classic) td,
.app-page:not(.app-page--classic) th {
    line-height: 1.5;
}

.app-page:not(.app-page--classic) label {
    margin-bottom: 6px;
    font-size: var(--ui-font-small);
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.app-page:not(.app-page--classic) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.app-page:not(.app-page--classic) select,
.app-page:not(.app-page--classic) textarea {
    min-height: var(--ui-control-height);
    padding: 9px 11px;
    border-width: 1px;
    font-size: var(--ui-font-body);
    line-height: 1.35;
}

.app-page:not(.app-page--classic) textarea {
    min-height: 108px;
    resize: vertical;
}

.app-page:not(.app-page--classic) .form-group {
    margin-bottom: var(--ui-space-4);
}

.app-page:not(.app-page--classic) button,
.app-page:not(.app-page--classic) .btn,
.app-page:not(.app-page--classic) .button {
    width: auto;
    max-width: 100%;
    min-height: var(--ui-control-height);
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    font-size: var(--ui-font-small);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

.app-page:not(.app-page--classic) table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.app-page:not(.app-page--classic) th,
.app-page:not(.app-page--classic) td {
    padding: 10px 12px;
    vertical-align: middle;
}

.app-page .message,
.app-page .notice,
.app-page .success,
.app-page .error,
.app-page .errors {
    margin-bottom: var(--ui-space-4);
    padding: 12px 14px;
    border-radius: var(--ui-radius-small);
    font-size: 13px;
    line-height: 1.5;
}

/* Gemeinsame Kartenproportionen; Farben und Fachzustände bleiben seitenbezogen. */
.game-dashboard-card,
.dashboard-card,
.market-panel,
.market-stat-card,
.village-target-card,
.world-map-card,
.combat-report-empty,
.combat-report-list-item,
.combat-report-participant,
.combat-report-result,
.scout-intelligence-section,
.troop-overview-card,
.alliance-card,
.public-alliance-card,
.alliance-directory-card,
.alliance-directory-empty,
.alliance-diplomacy-entry,
.notification-entry,
.notification-empty,
.alliance-ranking-table-wrap,
.alliance-ranking-empty {
    border-radius: var(--ui-radius);
}

.game-dashboard-grid,
.market-grid,
.market-capacity-grid,
.village-target-layout,
.world-map-layout,
.alliance-grid,
.alliance-directory-grid,
.alliance-experience-statistics-columns {
    gap: var(--ui-space-4);
}

.page-heading,
.section-header,
.alliance-hero,
.public-alliance-header,
.village-target-header,
.world-map-header,
.troop-overview-header,
.combat-report-page-header,
.game-dashboard-hero,
.alliance-page-header,
.alliance-directory-header,
.alliance-ranking-header,
.notification-page-header {
    box-sizing: border-box;
}

.auth-container {
    max-width: none;
}

.auth-form {
    padding: clamp(22px, 4vw, 34px);
    border-width: 2px;
    border-radius: var(--ui-radius);
}

.auth-form h2 {
    margin: 0 0 24px;
    color: var(--ui-accent);
    font-size: clamp(24px, 5vw, 30px);
    line-height: 1.2;
}

.auth-form .btn,
.auth-primary-link {
    width: 100%;
}

.auth-development-message {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.auth-development-link {
    color: #ffc107;
    overflow-wrap: anywhere;
}

.auth-verification-message {
    margin-bottom: 22px;
}

.auth-verification-copy {
    margin-bottom: 18px;
    color: #d4af37;
    text-align: center;
}

.auth-primary-link {
    display: flex;
}

.legal-page {
    padding: 24px 26px;
}

.legal-page h2 {
    margin: 0 0 20px;
    padding: 0 0 12px;
    font-size: var(--ui-font-title);
}

.legal-page p {
    margin-bottom: 14px;
}

.legal-list {
    margin: 0 0 0 22px;
    line-height: 1.7;
}

.error-container {
    max-width: none;
    padding: clamp(22px, 4vw, 32px);
    border-radius: var(--ui-radius);
}

.error-container h1 {
    margin-bottom: 12px;
    font-size: var(--ui-font-title);
    line-height: 1.2;
}

.error-container > .btn + .btn {
    margin-left: 8px;
}

.error-detail-card {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid #d4af37;
    border-radius: var(--ui-radius-small);
    background: #1a1410;
    text-align: left;
}

.error-detail-card-danger {
    border-color: #e74c3c;
}

.error-detail-card p {
    margin: 0 0 8px;
}

.error-detail-card p:last-child {
    margin-bottom: 0;
}

.error-detail-code {
    max-width: 100%;
    overflow-x: auto;
    color: #ff6b6b;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.navbar-logout-form {
    display: inline-flex;
    margin: 0;
}

.test-village-inline-form {
    display: inline-flex;
    margin-left: 10px;
    vertical-align: middle;
}

.app-page--classic {
    margin-top: 18px;
}

.app-page--classic .success,
.app-page--classic .error,
.app-page--classic .message {
    border-radius: var(--ui-radius-small);
}

@media (max-width: 960px) {
    .app-page,
    .app-page--wide,
    .app-page--narrow,
    .app-page--auth {
        width: min(100% - 24px, var(--ui-page-wide));
    }

    .app-page-header {
        padding: 18px;
    }
}

@media (max-width: 760px) {
    .app-page,
    .app-page--wide,
    .app-page--narrow,
    .app-page--auth {
        width: calc(100% - 20px);
        margin-top: 14px;
        margin-bottom: 32px;
    }

    .app-page-header {
        padding: 16px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .app-page-header h1 {
        font-size: clamp(24px, 7vw, 30px);
    }

    .app-page-header > a.btn,
    .app-page-header > form,
    .app-page-header > .alliance-page-header-actions,
    .app-page-header > .alliance-directory-header-actions,
    .app-page-header > .alliance-ranking-header-actions,
    .app-page-header > .game-dashboard-hero-actions,
    .app-page-header > .public-alliance-header-stats {
        width: 100%;
    }

    .app-page-header > a.btn,
    .app-page-header > form .btn,
    .app-page-header > form button {
        width: 100%;
    }

    .app-page:not(.app-page--classic) th,
    .app-page:not(.app-page--classic) td {
        padding: 9px 10px;
    }

    .legal-page {
        padding: 20px;
    }
}

@media (max-width: 520px) {
    :root {
        --ui-control-height: 38px;
        --ui-font-body: 13px;
    }

    .app-page-header {
        padding: 14px;
    }

    .app-page:not(.app-page--classic) button,
    .app-page:not(.app-page--classic) .btn,
    .app-page:not(.app-page--classic) .button {
        padding: 8px 11px;
        font-size: 11px;
    }

    .error-container > .btn {
        width: 100%;
    }

    .error-container > .btn + .btn {
        margin: 8px 0 0;
    }

    .test-village-inline-form {
        display: flex;
        margin: 10px 0 0;
    }

    .test-village-inline-form button {
        width: 100%;
    }
}

/* Patch 02: kompakte, tastaturbedienbare Sprachauswahl in der Hauptnavigation. */
.navbar-language-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.navbar-language-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.navbar-language-form select,
.navbar-language-form button {
    min-height: 34px;
    margin: 0;
}

.navbar-language-form select {
    min-width: 104px;
}

.navbar-language-form button {
    padding: 6px 10px;
}

@media (max-width: 900px) {
    .navbar-language-form {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* Patch 02.1: konfliktfreie, responsive Hauptnavigation nach Einführung der Sprachwahl. */
.navbar-content {
    max-width: 1600px;
    min-height: 58px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas: "brand menu language";
    align-items: center;
    justify-content: stretch;
    gap: 8px 14px;
    padding: 8px 14px;
}

.navbar-brand {
    grid-area: brand;
    position: static;
    inset: auto;
    transform: none;
    justify-self: start;
}

.navbar-menu {
    grid-area: menu;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px 4px;
}

.navbar-menu > li,
.navbar-menu > li > a,
.navbar-logout-form,
.navbar-logout-button {
    min-width: 0;
}

.navbar-menu > li > a,
.navbar-logout-button,
.navbar-world {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-language-form {
    grid-area: language;
    width: auto;
    max-width: 100%;
    margin: 0;
    justify-self: end;
    flex-wrap: nowrap;
}

.navbar-language-form select {
    min-width: 96px;
    max-width: 132px;
}

.navbar-language-form button {
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .navbar-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "menu"
            "language";
        gap: 7px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .navbar-brand,
    .navbar-language-form {
        justify-self: center;
    }

    .navbar-menu {
        padding: 5px 0;
        border-top: 1px solid rgba(139, 115, 85, 0.45);
        border-bottom: 1px solid rgba(139, 115, 85, 0.45);
    }
}

@media (max-width: 760px) {
    .navbar-content {
        gap: 6px;
        padding: 8px 10px;
    }

    .navbar-menu {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 7px 2px 9px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-menu > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .navbar-menu a,
    .navbar-logout-button,
    .navbar-world {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .navbar-language-form {
        width: 100%;
        margin: 0;
        justify-content: center;
    }

    .navbar-language-form select {
        flex: 1 1 150px;
        width: auto;
        min-width: 0;
        max-width: 220px;
    }
}

@media (max-width: 420px) {
    .navbar-brand {
        font-size: 19px;
    }

    .navbar-language-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .navbar-language-form select {
        width: 100%;
        max-width: none;
    }
}

/* Package 1: account security */
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; align-items:start; }
.account-grid .card { min-width:0; }
.account-grid form { display:grid; gap:.75rem; }
.account-grid label { display:grid; gap:.35rem; }
.account-session { display:grid; gap:.3rem; padding:.75rem 0; border-bottom:1px solid rgba(127,127,127,.25); }
.account-session form { display:block; }
.danger-zone { border-color:#9b2c2c; }
.danger-zone .danger { background:#9b2c2c; }
@media (max-width:720px) { .account-grid { grid-template-columns:1fr; } }

.alliance-directory-description {
    max-height: 8.5rem;
    overflow: hidden;
    color: #c9bda4;
    line-height: 1.55;
}
.alliance-directory-description .rich-text-content { margin: 0; }

.report-type-tabs{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1rem}

/* Canvas-Weltkarte: Craft-Imperium-Theme mit OOP-gesteuertem Canvas-Renderer. */
.canvas-map-page {
    --map-surface-top: rgba(61, 54, 48, .985);
    --map-surface-bottom: rgba(27, 22, 18, .99);
    --map-surface-raised: rgba(48, 40, 33, .985);
    --map-surface-muted: rgba(24, 19, 15, .9);
    --map-border: #8b7355;
    --map-border-strong: #c49d46;
    --map-text: #e2d8c5;
    --map-text-muted: #b9ab93;
    --map-accent: #f2d36c;
    --map-accent-deep: #b8860b;
    --map-danger: #d45c50;
    --map-canvas-backdrop: #17130f;
    --map-canvas-frame: #8b7355;
    --map-coordinate-text: #c8bda9;
    --map-terrain-1: #435b36;
    --map-terrain-2: #3d5332;
    --map-terrain-3: #4a603a;
    --map-terrain-4: #384d2e;
    --map-terrain-5: #465c37;
    --map-grid-minor: rgba(18, 24, 15, .36);
    --map-grid-sector: rgba(128, 104, 65, .72);
    --map-grid-district: rgba(242, 211, 108, .9);
    --map-selection: #fff0a0;
    --map-alliance-search: #b678ff;
    --map-active: #f2d36c;
    --map-watchtower-fill: rgba(242, 211, 108, .13);
    --map-watchtower-stroke: rgba(242, 211, 108, .82);
    --map-overview-viewport: #fff0a0;
    --map-relation-own: #f2d36c;
    --map-relation-same-alliance: #6787e8;
    --map-relation-friend: #5ed7a2;
    --map-relation-alliance: #4eb6d8;
    --map-relation-nap: #b56dc2;
    --map-relation-enemy: #e15d52;
    --map-relation-barbarian: #9a7655;
    --map-relation-system: #8c8c86;
    --map-relation-other: #d8d0c2;
    max-width: 1500px;
}

.canvas-map-header {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.canvas-map-header::after {
    background:
        linear-gradient(90deg, transparent, rgba(242, 211, 108, .18), transparent),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 8px);
    bottom: 0;
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.canvas-map-header-copy {
    min-width: 0;
}

.canvas-map-header-meta {
    align-items: center;
    color: var(--map-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .65rem;
    margin-top: .3rem;
}

.canvas-map-header-meta strong {
    color: var(--map-accent);
}

.canvas-map-header-separator {
    color: var(--map-border);
}

.canvas-map-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
}

.canvas-map-detail-panel,
.canvas-map-sidebar .world-map-card {
    background:
        radial-gradient(circle at top right, rgba(242, 211, 108, .055), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, var(--map-surface-top), var(--map-surface-bottom));
    border: 1px solid var(--map-border);
    border-radius: var(--ui-radius-large, 9px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 22px rgba(0,0,0,.38),
        0 10px 24px rgba(0,0,0,.36);
    color: var(--map-text);
}

.canvas-map-detail-panel {
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.canvas-map-detail-panel::before,
.canvas-map-detail-panel::after {
    border-color: var(--map-border-strong);
    border-style: solid;
    content: '';
    height: 13px;
    pointer-events: none;
    position: absolute;
    top: 8px;
    width: 13px;
    z-index: 9;
}

.canvas-map-detail-panel::before {
    border-width: 2px 0 0 2px;
    left: 8px;
}

.canvas-map-detail-panel::after {
    border-width: 2px 2px 0 0;
    right: 8px;
}

.canvas-map-toolbar {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(70, 61, 53, .99), rgba(34, 28, 23, .99)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
    border-bottom: 1px solid var(--map-border);
    display: grid;
    gap: .42rem;
    grid-template-columns: auto auto minmax(8rem, 1fr) auto auto;
    padding: .55rem .65rem;
}

.canvas-map-page .canvas-map-toolbar button,
.canvas-map-page .canvas-map-home-link {
    align-items: center;
    background: linear-gradient(180deg, #4a4037, #29231e);
    border: 1px solid var(--map-border);
    border-radius: var(--ui-radius-small, 4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 5px rgba(0,0,0,.34);
    color: var(--map-accent);
    cursor: pointer;
    display: inline-flex;
    font: 700 12px/1.2 Georgia, 'Times New Roman', serif;
    gap: .45rem;
    justify-content: center;
    letter-spacing: .35px;
    min-height: 36px;
    padding: .45rem .75rem;
    text-transform: uppercase;
    transform: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.canvas-map-page .canvas-map-toolbar button {
    font-size: 16px;
    min-width: 42px;
    padding-inline: .65rem;
}

.canvas-map-page .canvas-map-toolbar button:hover,
.canvas-map-page .canvas-map-toolbar button:focus-visible,
.canvas-map-page .canvas-map-home-link:hover,
.canvas-map-page .canvas-map-home-link:focus-visible {
    background: linear-gradient(180deg, #5a4c3e, #342b23);
    border-color: var(--map-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 10px rgba(212,175,55,.2);
    color: #fff0a0;
    outline: none;
    transform: none;
}

.canvas-map-home-link-icon {
    color: var(--map-accent);
    font-size: 15px;
    line-height: 1;
}

.canvas-map-toolbar-status {
    align-items: center;
    color: var(--map-text-muted);
    display: flex;
    font-size: .84rem;
    gap: .45rem;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-map-status-light {
    background: #5f8d4c;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(95,141,76,.55);
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.canvas-map-page[data-map-loading-active] .canvas-map-status-light {
    animation: canvas-map-status-pulse 1s ease-in-out infinite;
    background: var(--map-accent);
    box-shadow: 0 0 9px rgba(242,211,108,.7);
}

@keyframes canvas-map-status-pulse {
    50% { opacity: .4; transform: scale(.78); }
}

.canvas-map-stage,
.canvas-map-overview-stage {
    background: var(--map-canvas-backdrop);
    overflow: hidden;
    position: relative;
}

.canvas-map-stage {
    border-bottom: 1px solid rgba(139,115,85,.55);
    min-height: 420px;
}

.canvas-map-stage::after,
.canvas-map-overview-stage::after {
    box-shadow: inset 0 0 22px rgba(0,0,0,.52);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.canvas-map-stage canvas,
.canvas-map-overview-stage canvas {
    cursor: grab;
    display: block;
    touch-action: none;
    user-select: none;
    width: 100%;
}

.canvas-map-stage canvas.is-dragging,
.canvas-map-overview-stage canvas.is-dragging {
    cursor: grabbing;
}

.canvas-map-loading[hidden] {
    display: none !important;
}

.canvas-map-loading {
    align-items: center;
    backdrop-filter: blur(2px);
    background: rgba(18, 14, 11, .7);
    color: var(--map-accent);
    display: flex;
    font-weight: 700;
    inset: 0;
    justify-content: center;
    letter-spacing: .35px;
    pointer-events: none;
    position: absolute;
    text-shadow: 0 2px 4px #000;
    z-index: 8;
}

.canvas-map-tooltip,
.canvas-map-context {
    background:
        radial-gradient(circle at top right, rgba(242,211,108,.08), transparent 42%),
        linear-gradient(180deg, rgba(58,49,41,.985), rgba(25,20,16,.99));
    border: 1px solid var(--map-border-strong);
    border-radius: var(--ui-radius, 6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.55);
    color: var(--map-text);
    max-width: 270px;
    padding: .62rem .72rem;
    position: absolute;
    z-index: 12;
}

.canvas-map-tooltip strong,
.canvas-map-context > strong {
    color: var(--map-accent);
}

.canvas-map-tooltip {
    font-size: .83rem;
    line-height: 1.45;
    pointer-events: none;
}

.canvas-map-context {
    min-width: 240px;
}

.canvas-map-context > strong,
.canvas-map-context > span {
    display: block;
    padding-right: 1.7rem;
}

.canvas-map-context > span {
    color: var(--map-text-muted);
    font-size: .82rem;
    margin-top: .15rem;
}

.canvas-map-page .canvas-map-context-close {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--map-text-muted);
    cursor: pointer;
    font: 400 1.35rem/1 Georgia, serif;
    min-height: 0;
    padding: .15rem .3rem;
    position: absolute;
    right: .25rem;
    text-transform: none;
    top: .2rem;
    transform: none;
}

.canvas-map-page .canvas-map-context-close:hover,
.canvas-map-page .canvas-map-context-close:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--map-accent);
    outline: none;
    transform: none;
}

.canvas-map-context-actions {
    display: grid;
    gap: .34rem;
    margin-top: .65rem;
}

.canvas-map-context-action {
    align-items: center;
    background: rgba(139,115,85,.12);
    border: 1px solid rgba(139,115,85,.38);
    border-radius: var(--ui-radius-small, 4px);
    color: var(--map-text);
    display: flex;
    gap: .5rem;
    min-height: 37px;
    padding: .4rem .48rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.canvas-map-context-action:hover,
.canvas-map-context-action:focus-visible {
    background: rgba(242,211,108,.1);
    border-color: var(--map-accent-deep);
    color: var(--map-accent);
    outline: none;
    text-shadow: none;
}

.canvas-map-context-action img {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
    flex: 0 0 auto;
    object-fit: contain;
}

.canvas-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .55rem;
    padding: .7rem .75rem .8rem;
}

.canvas-map-legend span {
    align-items: center;
    background: rgba(20,16,13,.36);
    border: 1px solid rgba(139,115,85,.28);
    border-radius: 999px;
    color: var(--map-text-muted);
    display: inline-flex;
    font-size: .78rem;
    gap: .38rem;
    line-height: 1;
    padding: .36rem .55rem;
}

.map-color {
    border: 1px solid rgba(10,8,6,.85);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    display: inline-block;
    height: .75rem;
    width: .75rem;
}

.map-color--own { background: var(--map-relation-own); }
.map-color--same-alliance { background: var(--map-relation-same-alliance); }
.map-color--friend { background: var(--map-relation-friend); }
.map-color--alliance { background: var(--map-relation-alliance); }
.map-color--nap { background: var(--map-relation-nap); }
.map-color--enemy { background: var(--map-relation-enemy); }
.map-color--barbarian { background: var(--map-relation-barbarian); }
.map-color--other { background: var(--map-relation-other); }
.map-color--alliance-search { background: var(--map-alliance-search); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }


.canvas-map-active-direction {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    color: var(--map-accent);
    cursor: pointer;
    display: grid;
    height: 46px;
    min-height: 0;
    padding: 0;
    place-items: center;
    pointer-events: auto;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 46px;
    z-index: 7;
}

.canvas-map-active-direction[hidden] {
    display: none !important;
}

.canvas-map-active-direction:hover,
.canvas-map-active-direction:focus-visible {
    background: transparent;
    box-shadow: none;
    outline: 1px solid rgba(242, 211, 108, .72);
    outline-offset: -2px;
}

.canvas-map-active-direction-rotor {
    align-items: center;
    display: inline-flex;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .78));
    gap: 0;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform;
}

.canvas-map-active-direction:hover .canvas-map-active-direction-rotor,
.canvas-map-active-direction:focus-visible .canvas-map-active-direction-rotor {
    filter: brightness(1.14) drop-shadow(0 2px 4px rgba(0, 0, 0, .82));
}

.canvas-map-active-direction-arrow {
    color: var(--map-accent);
    display: inline-block;
    font-size: 1.32rem;
    line-height: 1;
    margin-left: -2px;
}

.canvas-map-active-direction strong {
    align-items: center;
    background: linear-gradient(180deg, rgba(65, 54, 42, .99), rgba(28, 22, 17, .99));
    border: 1px solid var(--map-accent);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    color: #fff0a0;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: .56rem;
    font-variant-numeric: tabular-nums;
    height: 24px;
    justify-content: center;
    letter-spacing: -.15px;
    line-height: 1;
    min-width: 24px;
    padding: 0;
    width: 24px;
    transform-origin: 50% 50%;
}

.canvas-map-groups {
    border-top: 1px solid rgba(139,115,85,.44);
    padding: .82rem .75rem .9rem;
}

.canvas-map-groups-header {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.canvas-map-groups-header h2,
.canvas-map-groups-header p {
    margin: 0;
}

.canvas-map-groups-header h2 {
    color: var(--map-accent);
    font-size: 1rem;
}

.canvas-map-groups-header p {
    color: var(--map-text-muted);
    font-size: .76rem;
    margin-top: .16rem;
}

.canvas-map-page .canvas-map-group-create,
.canvas-map-page .canvas-map-group-actions button,
.canvas-map-page .canvas-map-group-member button {
    background: linear-gradient(180deg, #4f4337, #2c241d);
    border: 1px solid var(--map-border-strong);
    border-radius: var(--ui-radius-small, 4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.32);
    color: var(--map-text);
    cursor: pointer;
    font: 700 .72rem/1.2 Georgia, 'Times New Roman', serif;
    min-height: 34px;
    padding: .42rem .62rem;
    text-transform: none;
    transform: none;
}

.canvas-map-page .canvas-map-group-create:hover,
.canvas-map-page .canvas-map-group-actions button:hover,
.canvas-map-page .canvas-map-group-member button:hover,
.canvas-map-page .canvas-map-group-create:focus-visible,
.canvas-map-page .canvas-map-group-actions button:focus-visible,
.canvas-map-page .canvas-map-group-member button:focus-visible {
    border-color: var(--map-accent);
    color: var(--map-accent);
    outline: none;
    transform: none;
}

.canvas-map-group-list {
    display: grid;
    gap: .38rem;
}

.canvas-map-group-row {
    align-items: center;
    background: rgba(20,16,13,.36);
    border: 1px solid rgba(139,115,85,.28);
    border-radius: var(--ui-radius-small, 4px);
    display: grid;
    gap: .48rem;
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: .4rem .48rem;
}

.canvas-map-group-color {
    background: var(--group-color, #f2d36c);
    border: 1px solid rgba(10,8,6,.9);
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, #f2d36c) 35%, transparent);
    height: .86rem;
    width: .86rem;
}

.canvas-map-page .canvas-map-group-edit {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--map-text);
    cursor: pointer;
    display: block;
    min-height: 0;
    padding: 0;
    text-align: left;
    text-transform: none;
    transform: none;
    width: 100%;
}

.canvas-map-page .canvas-map-group-edit:hover,
.canvas-map-page .canvas-map-group-edit:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--map-accent);
    outline: none;
    transform: none;
}

.canvas-map-group-edit strong,
.canvas-map-group-edit span {
    display: block;
}

.canvas-map-group-edit span {
    color: var(--map-text-muted);
    font-size: .7rem;
    margin-top: .08rem;
}

.canvas-map-group-empty,
.canvas-map-group-member-empty {
    color: var(--map-text-muted);
    font-size: .78rem;
    margin: 0;
    padding: .45rem 0;
}

.canvas-map-group-status {
    color: var(--map-accent);
    font-size: .74rem;
    min-height: 1.2em;
    margin: .4rem 0 0;
}

.canvas-map-group-status[data-error] {
    color: #f08b83;
}

.canvas-map-group-editor[hidden] {
    display: none !important;
}

.canvas-map-group-editor {
    background: rgba(18,14,11,.54);
    border: 1px solid rgba(139,115,85,.36);
    border-radius: var(--ui-radius, 6px);
    margin-top: .65rem;
    padding: .7rem;
}

.canvas-map-group-fields,
.canvas-map-group-member-tools {
    align-items: end;
    display: grid;
    gap: .55rem;
}

.canvas-map-group-fields {
    grid-template-columns: minmax(160px, 1fr) 90px minmax(170px, auto);
}

.canvas-map-group-member-tools {
    grid-template-columns: 155px minmax(180px, 1fr);
    margin-top: .7rem;
    position: relative;
}

.canvas-map-group-fields label,
.canvas-map-group-member-tools label {
    color: var(--map-text-muted);
    display: grid;
    font-size: .72rem;
    gap: .25rem;
    margin: 0;
}

.canvas-map-group-visible {
    align-items: center;
    display: flex !important;
    min-height: 38px;
}

.canvas-map-group-fields input[type="text"],
.canvas-map-group-fields input[type="color"],
.canvas-map-group-member-tools input,
.canvas-map-group-member-tools select {
    background: rgba(18,14,11,.82);
    border: 1px solid var(--map-border);
    border-radius: var(--ui-radius-small, 4px);
    color: var(--map-text);
    min-height: 38px;
    padding: .45rem .52rem;
    width: 100%;
}

.canvas-map-group-fields input[type="color"] {
    padding: .22rem;
}

.canvas-map-group-search-results {
    background: linear-gradient(180deg, rgba(54,45,37,.995), rgba(25,20,16,.995));
    border: 1px solid var(--map-border-strong);
    border-radius: var(--ui-radius-small, 4px);
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
    max-height: 16rem;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: calc(100% - 170px);
    z-index: 24;
}

.canvas-map-group-search-results[hidden] {
    display: none !important;
}

.canvas-map-group-search-results > p {
    color: var(--map-text-muted);
    font-size: .78rem;
    margin: 0;
    padding: .6rem;
}

.canvas-map-page .canvas-map-group-search-result {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(139,115,85,.24);
    border-radius: 0;
    box-shadow: none;
    color: var(--map-text);
    cursor: pointer;
    display: block;
    min-height: 0;
    padding: .5rem .6rem;
    text-align: left;
    text-transform: none;
    transform: none;
    width: 100%;
}

.canvas-map-page .canvas-map-group-search-result:hover,
.canvas-map-page .canvas-map-group-search-result:focus-visible {
    background: rgba(242,211,108,.09);
    color: var(--map-accent);
    outline: none;
    transform: none;
}

.canvas-map-group-search-result strong,
.canvas-map-group-search-result span {
    display: block;
}

.canvas-map-group-search-result span {
    color: var(--map-text-muted);
    font-size: .72rem;
    margin-top: .08rem;
}

.canvas-map-group-members {
    display: grid;
    gap: .34rem;
    margin-top: .7rem;
}

.canvas-map-group-member {
    align-items: center;
    background: rgba(139,115,85,.1);
    border: 1px solid rgba(139,115,85,.25);
    border-radius: var(--ui-radius-small, 4px);
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    padding: .38rem .45rem;
}

.canvas-map-group-member strong,
.canvas-map-group-member small {
    display: block;
}

.canvas-map-group-member small {
    color: var(--map-text-muted);
    margin-top: .1rem;
}

.canvas-map-group-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .7rem;
}

.canvas-map-page .canvas-map-group-actions .danger {
    border-color: rgba(225,93,82,.62);
    color: #f2a29b;
    margin-left: auto;
}

.canvas-map-sidebar {
    align-content: start;
    display: grid;
    gap: .8rem;
}

.canvas-map-sidebar .world-map-card {
    overflow: visible;
    padding: .78rem;
}

.canvas-map-sidebar .world-map-card h2 {
    align-items: center;
    color: var(--map-accent);
    display: flex;
    font-size: .98rem;
    gap: .45rem;
    letter-spacing: .35px;
    margin: 0 0 .62rem;
    padding-bottom: .45rem;
    position: relative;
    text-transform: uppercase;
}

.canvas-map-sidebar .world-map-card h2::after {
    background: linear-gradient(90deg, var(--map-border-strong), transparent);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.canvas-map-card-icon {
    color: var(--map-accent-deep);
    font-size: .92rem;
}

.canvas-map-overview-card header {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.canvas-map-overview-card header span,
.canvas-map-overview-card p {
    color: var(--map-text-muted);
    font-size: .75rem;
    line-height: 1.45;
    margin: .4rem 0 0;
}

.canvas-map-overview-card header span {
    background: rgba(20,16,13,.45);
    border: 1px solid rgba(139,115,85,.32);
    border-radius: 999px;
    margin-top: .05rem;
    padding: .24rem .42rem;
    white-space: nowrap;
}

.canvas-map-overview-stage {
    border: 1px solid var(--map-border);
    border-radius: var(--ui-radius-small, 4px);
    aspect-ratio: 1 / 1;
}

.canvas-map-search-kind {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem .65rem;
    margin-bottom: .52rem;
}

.canvas-map-page .canvas-map-search-kind label,
.canvas-map-page .canvas-map-options-card label {
    color: var(--map-text-muted);
    font-size: .79rem;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}

.canvas-map-page input[type="radio"],
.canvas-map-page input[type="checkbox"] {
    accent-color: var(--map-accent-deep);
}

.canvas-map-search-input,
.canvas-map-search-input input {
    display: block;
    width: 100%;
}

.canvas-map-page .canvas-map-search-input input,
.canvas-map-page .canvas-map-center-card input {
    background: rgba(18,14,11,.82);
    border: 1px solid var(--map-border);
    border-radius: var(--ui-radius-small, 4px);
    color: var(--map-text);
    font: 400 .86rem/1.2 Georgia, 'Times New Roman', serif;
    min-height: 38px;
    padding: .5rem .58rem;
}

.canvas-map-page .canvas-map-search-input input:focus,
.canvas-map-page .canvas-map-center-card input:focus {
    background: rgba(26,20,16,.96);
    border-color: var(--map-accent-deep);
    box-shadow: 0 0 0 2px rgba(242,211,108,.1);
    outline: none;
}

.canvas-map-page .canvas-map-search-input input::placeholder {
    color: #827766;
}

.canvas-map-search-results {
    background: linear-gradient(180deg, rgba(54,45,37,.995), rgba(25,20,16,.995));
    border: 1px solid var(--map-border-strong);
    border-radius: var(--ui-radius-small, 4px);
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
    margin-top: .25rem;
    max-height: 18rem;
    overflow: auto;
    position: absolute;
    width: calc(100% - 1.56rem);
    z-index: 20;
}

.canvas-map-search-results > p {
    color: var(--map-text-muted);
    font-size: .82rem;
    margin: 0;
    padding: .65rem;
}

.canvas-map-search-card {
    position: relative;
}

.canvas-map-page .canvas-map-search-result {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(139,115,85,.24);
    border-radius: 0;
    box-shadow: none;
    color: var(--map-text);
    cursor: pointer;
    display: block;
    font: 400 .84rem/1.35 Georgia, 'Times New Roman', serif;
    min-height: 0;
    padding: .52rem .62rem;
    text-align: left;
    text-transform: none;
    transform: none;
    width: 100%;
}

.canvas-map-page .canvas-map-search-result:hover,
.canvas-map-page .canvas-map-search-result:focus-visible,
.canvas-map-page .canvas-map-search-result[aria-selected="true"] {
    background: rgba(242,211,108,.09);
    box-shadow: none;
    color: var(--map-accent);
    outline: none;
    transform: none;
}

.canvas-map-search-result strong,
.canvas-map-search-result span {
    display: block;
}

.canvas-map-search-result strong {
    color: var(--map-accent);
}

.canvas-map-search-result span {
    color: var(--map-text-muted);
    font-size: .75rem;
    margin-top: .1rem;
}

.canvas-map-options-card form {
    display: grid;
    gap: .46rem;
}

.canvas-map-options-card label {
    align-items: flex-start;
    display: flex;
    gap: .45rem;
    line-height: 1.35;
}

.canvas-map-options-card input {
    flex: 0 0 auto;
    margin-top: .16rem;
}

.canvas-map-preferences-status {
    color: var(--map-accent);
    font-size: .75rem;
    min-height: 1.2em;
    margin: .22rem 0 0;
}

.canvas-map-center-card form {
    align-items: end;
    display: grid;
    gap: .45rem;
    grid-template-columns: 1fr 1fr auto;
}

.canvas-map-page .canvas-map-center-card label {
    color: var(--map-text-muted);
    display: grid;
    font-size: .75rem;
    gap: .24rem;
    letter-spacing: .4px;
    margin: 0;
    text-transform: uppercase;
}

.canvas-map-center-card input {
    min-width: 0;
    width: 100%;
}

.canvas-map-page .canvas-map-center-card button {
    background: linear-gradient(180deg, var(--map-accent), var(--map-accent-deep));
    border: 1px solid #9f761c;
    border-radius: var(--ui-radius-small, 4px);
    box-shadow: 0 3px 7px rgba(0,0,0,.34);
    color: #201810;
    font: 700 .74rem/1.2 Georgia, 'Times New Roman', serif;
    min-height: 38px;
    padding: .48rem .65rem;
    text-transform: uppercase;
    transform: none;
}

.canvas-map-page .canvas-map-center-card button:hover,
.canvas-map-page .canvas-map-center-card button:focus-visible {
    background: linear-gradient(180deg, #ffe68b, #c79a25);
    box-shadow: 0 0 10px rgba(242,211,108,.25);
    outline: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .canvas-map-page[data-map-loading-active] .canvas-map-status-light {
        animation: none;
    }
}

@media (max-width: 980px) {
    .canvas-map-layout {
        grid-template-columns: 1fr;
    }

    .canvas-map-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .canvas-map-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .canvas-map-page .canvas-map-home-link {
        width: 100%;
    }

    .canvas-map-sidebar {
        grid-template-columns: 1fr;
    }

    .canvas-map-toolbar {
        grid-template-columns: repeat(4, 1fr);
    }

    .canvas-map-toolbar-status {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 26px;
    }

    .canvas-map-center-card form {
        grid-template-columns: 1fr 1fr;
    }

    .canvas-map-center-card button {
        grid-column: 1 / -1;
    }

    .canvas-map-legend {
        gap: .36rem;
    }

    .canvas-map-legend span {
        font-size: .72rem;
    }
}

@media (max-width: 700px) {
    .canvas-map-groups-header {
        align-items: stretch;
        flex-direction: column;
    }

    .canvas-map-page .canvas-map-group-create {
        width: 100%;
    }

    .canvas-map-group-fields,
    .canvas-map-group-member-tools {
        grid-template-columns: 1fr;
    }

    .canvas-map-group-search-results {
        width: 100%;
    }

    .canvas-map-page .canvas-map-group-actions .danger {
        margin-left: 0;
    }
}

/* Unified, themeable Freunde-|Chats window. */

.chat-dock-extension-host {
    display: contents;
}

.ci-chat-shell {
    --chat-window-width: 292px;
    --chat-window-height: 390px;
    --chat-border-slice: 16;
    --chat-window-radius: 9px;
    --chat-asset-frame: none;
    --chat-asset-header: none;
    --chat-asset-panel: none;
    --chat-asset-button: none;
    --chat-asset-button-hover: none;
    --chat-asset-button-active: none;
    --chat-asset-tab: none;
    --chat-asset-tab-hover: none;
    --chat-asset-tab-active: none;
    --chat-asset-input: none;
    --chat-asset-contact: none;
    --chat-asset-contact-hover: none;
    --chat-asset-message: none;
    --chat-asset-message-own: none;
    --chat-asset-compose: none;
    --chat-asset-unread: none;
    --chat-icon-friends: none;
    --chat-icon-chats: none;
    --chat-icon-send: none;
    --chat-icon-minimize: none;
    --chat-icon-restore: none;
    --chat-icon-back: none;
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 1100;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(var(--chat-window-width), calc(100vw - 20px));
    height: min(var(--chat-window-height), calc(100vh - 76px));
    min-width: 246px;
    min-height: 225px;
    border: 10px solid transparent;
    border-image-source: var(--chat-asset-frame);
    border-image-slice: var(--chat-border-slice) fill;
    border-image-width: 10px;
    border-image-repeat: stretch;
    border-radius: var(--chat-window-radius);
    background: linear-gradient(180deg, #241d17, #15110e);
    color: #f2eadc;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .52);
    overflow: hidden;
    isolation: isolate;
}

.ci-chat-shell[data-minimized] {
    width: min(205px, calc(100vw - 20px));
    height: auto;
    min-height: 0;
}

.ci-chat-header {
    display: flex;
    align-items: flex-end;
    gap: .18rem;
    min-height: 31px;
    padding: .12rem .2rem 0;
    background-color: #2b2119;
    background-image: var(--chat-asset-header), linear-gradient(180deg, rgba(92, 67, 38, .52), rgba(28, 21, 16, .95));
    background-size: auto, cover;
    border-bottom: 1px solid rgba(241, 202, 101, .28);
}

.ci-chat-tabs {
    display: flex;
    align-self: stretch;
    flex: 1;
    gap: 0;
    min-width: 0;
}

.ci-chat-tab,
.ci-chat-window-button,
.ci-chat-send,
.ci-chat-contact-name-action,
.ci-chat-conversation-name-action {
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ci-chat-tab {
    position: relative;
    min-width: 0;
    min-height: 28px;
    padding: .2rem .48rem .16rem 1.4rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 5px 5px 0 0;
    background-color: transparent;
    background-image: var(--chat-asset-tab);
    background-size: 100% 100%;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .015em;
    text-align: left;
}

.ci-chat-tab::before,
.ci-chat-window-button::before,
.ci-chat-send::before {
    content: '';
    position: absolute;
    inset: 50% auto auto .34rem;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: center / contain no-repeat;
    pointer-events: none;
}

.ci-chat-tab--friends::before { background-image: var(--chat-icon-friends); }
.ci-chat-tab--chats::before { background-image: var(--chat-icon-chats); }

.ci-chat-tab:hover,
.ci-chat-tab:focus-visible {
    border-bottom-color: rgba(246, 213, 123, .52);
    background-image: var(--chat-asset-tab-hover);
    outline: none;
}

.ci-chat-window-button:hover,
.ci-chat-window-button:focus-visible,
.ci-chat-send:hover,
.ci-chat-send:focus-visible {
    border-color: rgba(246, 213, 123, .7);
    background-image: var(--chat-asset-button-hover);
    outline: none;
}

.ci-chat-tab.is-active {
    border-bottom-color: #f1d477;
    background-color: rgba(116, 83, 31, .2);
    background-image: var(--chat-asset-tab-active);
    color: #fff0a8;
    box-shadow: none;
}

.ci-chat-window-button {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-bottom: 3px;
    padding: 0;
    border: 1px solid rgba(238, 205, 122, .25);
    border-radius: 5px;
    background-color: rgba(13, 11, 9, .44);
    background-image: var(--chat-asset-button);
    background-size: 100% 100%;
}

.ci-chat-send {
    border: 1px solid rgba(238, 205, 122, .25);
    border-radius: 6px;
}

.ci-chat-window-button::before {
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
}

.ci-chat-minimize::before { background-image: var(--chat-icon-minimize); }
.ci-chat-minimize.is-restoring::before { background-image: var(--chat-icon-restore); }
.ci-chat-back::before { background-image: var(--chat-icon-back); }
.ci-chat-refresh::before {
    background-image: none;
    content: '↻';
    display: grid;
    place-items: center;
    color: #f0d170;
    font-size: 1rem;
}

.ci-chat-body,
.ci-chat-view,
.ci-chat-chats-view,
.ci-chat-conversation,
.ci-chat-list {
    min-height: 0;
}

.ci-chat-body {
    overflow: hidden;
    background-color: #17130f;
    background-image: var(--chat-asset-panel), linear-gradient(180deg, rgba(34, 27, 21, .98), rgba(19, 16, 13, .99));
    background-size: auto, cover;
}

.ci-chat-body[hidden],
.ci-chat-view[hidden],
.ci-chat-list[hidden],
.ci-chat-conversation[hidden] {
    display: none !important;
}

.ci-chat-view {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 176, 79, .58) rgba(0, 0, 0, .2);
}

.ci-chat-friends-view,
.ci-chat-list {
    padding: .34rem;
}

.ci-chat-directory-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .74rem;
}

.ci-chat-directory-group + .ci-chat-directory-group .ci-chat-directory-heading th {
    border-top: 1px solid rgba(237, 202, 111, .14);
}

.ci-chat-directory-heading th {
    height: 23px;
    padding: .22rem .34rem .12rem;
    color: #f2d36c;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    background: rgba(8, 7, 6, .22);
}

.ci-chat-contact-row {
    height: 27px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.ci-chat-contact-row:last-child {
    border-bottom: 0;
}

.ci-chat-contact-row:hover,
.ci-chat-contact-row:focus-within {
    background-color: rgba(242, 211, 108, .08);
    background-image: var(--chat-asset-contact-hover);
    background-size: 100% 100%;
}

.ci-chat-contact-name-cell {
    width: auto;
    min-width: 0;
    padding: 0;
}

.ci-chat-contact-name-action {
    display: block;
    width: 100%;
    min-width: 0;
    height: 27px;
    padding: 0 .34rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #eee4d4;
    font: inherit;
    font-size: .75rem;
    line-height: 27px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ci-chat-contact-name-action:hover,
.ci-chat-contact-name-action:focus-visible {
    color: #fff0a8;
    outline: none;
}

.ci-chat-contact-profile-cell {
    width: 25px;
    padding: 0 .16rem 0 0;
    text-align: center;
}

.ci-chat-profile-link {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    color: rgba(232, 202, 114, .72);
    font-size: .72rem;
    line-height: 1;
    text-decoration: none;
}

.ci-chat-profile-link:hover,
.ci-chat-profile-link:focus-visible {
    background: rgba(242, 211, 108, .1);
    color: #fff0a8;
    outline: none;
}

.ci-chat-directory-empty-row td {
    height: 25px;
    padding: 0 .34rem;
    color: rgba(235, 226, 211, .52);
    font-size: .68rem;
    font-style: italic;
}

.ci-chat-conversation-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .72rem;
}

.ci-chat-conversation-row {
    height: 27px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.ci-chat-conversation-row:last-child {
    border-bottom: 0;
}

.ci-chat-conversation-row:hover,
.ci-chat-conversation-row:focus-within {
    background-color: rgba(242, 211, 108, .08);
    background-image: var(--chat-asset-contact-hover);
    background-size: 100% 100%;
}

.ci-chat-conversation-name-cell {
    width: 38%;
    min-width: 0;
    padding: 0;
}

.ci-chat-conversation-name-action {
    display: block;
    width: 100%;
    min-width: 0;
    height: 27px;
    padding: 0 .28rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #eee4d4;
    font: inherit;
    font-size: .73rem;
    font-weight: 700;
    line-height: 27px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ci-chat-conversation-name-action:hover,
.ci-chat-conversation-name-action:focus-visible {
    color: #fff0a8;
    outline: none;
}

.ci-chat-conversation-preview-cell {
    min-width: 0;
    padding: 0 .2rem;
}

.ci-chat-conversation-preview {
    display: block;
    overflow: hidden;
    color: rgba(235, 226, 211, .58);
    font-size: .66rem;
    line-height: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-chat-conversation-meta-cell {
    width: 44px;
    padding: 0 .18rem 0 0;
    text-align: right;
    white-space: nowrap;
}

.ci-chat-conversation-time {
    color: rgba(235, 226, 211, .48);
    font-size: .58rem;
    line-height: 1;
}

.ci-chat-conversation-meta-cell .ci-chat-unread {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: .16rem;
    padding: 0 .22rem;
    font-size: .58rem;
    vertical-align: middle;
}

.ci-chat-view-heading,
.ci-chat-conversation-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.ci-chat-view-heading {
    min-height: 25px;
    margin-bottom: .2rem;
}

.ci-chat-view-heading .ci-chat-section-title {
    flex: 1;
    margin: 0;
}

.ci-chat-unread {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .3rem;
    border-radius: 999px;
    background-color: #b74b3f;
    background-image: var(--chat-asset-unread);
    background-size: 100% 100%;
    color: #fff;
    font-size: .67rem;
    font-weight: 800;
}

.ci-chat-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
}

.ci-chat-conversation-bar {
    min-height: 44px;
    padding: .42rem .55rem;
    border-bottom: 1px solid rgba(237, 202, 111, .16);
    background: rgba(10, 8, 7, .3);
}

.ci-chat-conversation-title {
    flex: 1;
}

.ci-chat-messages {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .34rem;
}

.ci-chat-message {
    width: fit-content;
    max-width: 88%;
    margin: 0 0 .48rem;
    padding: .48rem .56rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px 10px 10px 3px;
    background-color: rgba(255, 255, 255, .055);
    background-image: var(--chat-asset-message);
    background-size: 100% 100%;
}

.ci-chat-message.is-own {
    margin-left: auto;
    border-color: rgba(231, 196, 100, .24);
    border-radius: 10px 10px 3px 10px;
    background-color: rgba(192, 145, 43, .13);
    background-image: var(--chat-asset-message-own);
    background-size: 100% 100%;
}

.ci-chat-message-meta {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .18rem;
    color: rgba(235, 226, 211, .58);
    font-size: .63rem;
}

.ci-chat-message-body {
    overflow-wrap: anywhere;
    font-size: .78rem;
    line-height: 1.4;
}

.ci-chat-message-body p {
    margin: 0;
}

.ci-chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: .22rem;
    padding: .55rem;
    border-top: 1px solid rgba(237, 202, 111, .16);
    background-color: rgba(10, 8, 7, .34);
    background-image: var(--chat-asset-compose);
    background-size: 100% 100%;
}

.ci-chat-input {
    width: 100%;
    min-height: 30px;
    max-height: 110px;
    resize: vertical;
    border: 1px solid rgba(238, 205, 122, .23);
    border-radius: 5px;
    padding: .5rem .56rem;
    background-color: rgba(7, 6, 5, .64);
    background-image: var(--chat-asset-input);
    background-size: 100% 100%;
    color: #f2eadc;
    font: inherit;
    font-size: .68rem;
}

.ci-chat-input:focus {
    border-color: rgba(246, 213, 123, .66);
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 191, 89, .1);
}

.ci-chat-send {
    position: relative;
    min-width: 40px;
    border-radius: 5px;
    background-color: rgba(100, 73, 28, .48);
    background-image: var(--chat-asset-button-active);
    background-size: 100% 100%;
}

.ci-chat-send::before {
    inset-inline-start: 50%;
    width: 21px;
    height: 21px;
    transform: translate(-50%, -50%);
    background-image: var(--chat-icon-send);
}

.ci-chat-send:disabled {
    cursor: wait;
    opacity: .55;
}

.ci-chat-empty,
.ci-chat-status {
    margin: .35rem 0;
}

.ci-chat-status[data-error] {
    color: #ef8b83;
}

@media (max-width: 520px) {
    .ci-chat-shell {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100vw - 16px);
        height: min(540px, calc(100vh - 76px));
        border-width: 14px;
        border-image-width: 14px;
    }

    .ci-chat-tab {
        padding-inline-start: 1.72rem;
        font-size: .72rem;
    }
}


.canvas-map-context {
    max-height: calc(100% - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Dorfansicht: professionelle Umschaltung zwischen Grafik und Tabelle */
.village-view-mode-tabs {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    margin: 0 0 10px;
    padding: 0 8px;
    border-bottom: 1px solid #8b7355;
}

.village-view-mode-tabs > button {
    min-width: 92px;
    padding: 7px 14px 6px;
    margin: 0 0 -1px;
    border: 1px solid transparent;
    border-bottom-color: #8b7355;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: #bcae91;
    box-shadow: none;
    font: inherit;
    font-weight: 700;
}

.village-view-mode-tabs > button:hover,
.village-view-mode-tabs > button:focus-visible {
    background: rgba(212, 175, 55, 0.08);
    color: #f6df8f;
    border-color: #65553f #65553f #8b7355;
}

.village-view-mode-tabs > button.is-active,
.village-view-mode-tabs > button[aria-selected="true"] {
    background: linear-gradient(to bottom, #2f2820, #18130f);
    color: #ffd700;
    border-color: #8b7355 #8b7355 #18130f;
}

.village-view-mode-tabs > button[aria-disabled="true"] {
    opacity: 0.72;
    background: transparent;
    color: #bcae91;
}

.village-view-mode-status {
    align-self: center;
    min-width: 0;
    margin: 0 0 6px 10px;
    color: #9ecb75;
    font-size: 12px;
}

.village-view-mode-status.is-error {
    color: #ff9b8f;
}

.village-table-view {
    min-width: 0;
    background: linear-gradient(to bottom, #211a14, #15100c);
    border: 1px solid #8b7355;
    border-radius: 4px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.58), 0 4px 12px rgba(0, 0, 0, 0.58);
}

.village-table-view[hidden],
.classic-village-main[hidden] {
    display: none !important;
}

.village-table-stack {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.village-table-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #65553f;
    border-radius: 4px;
    background: rgba(15, 12, 9, 0.72);
}

.village-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-bottom: 1px solid #65553f;
    background: linear-gradient(to bottom, #2a2520, #1a1410);
}

.village-table-card-header h2 {
    margin: 0;
    color: #ffd700;
    font-size: 14px;
}

.village-table-card-header p {
    margin: 2px 0 0;
    color: #a99d88;
    font-size: 11px;
}

.village-table-summary {
    flex: 0 0 auto;
    color: #f2dea0;
    font-size: 11px;
    font-weight: 700;
}

.village-table-scroll {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.village-management-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
    color: #d7c9ad;
    font-size: 12px;
}

.village-management-table th,
.village-management-table td {
    padding: 6px 7px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.42);
    vertical-align: middle;
    text-align: left;
}

.village-management-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #1d1813;
    color: #f1d98a;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.village-management-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}

.village-management-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.07);
}

.village-building-table th:nth-child(1) { width: 20%; }
.village-building-table th:nth-child(2) { width: 7%; }
.village-building-table th:nth-child(3) { width: 14%; }
.village-building-table th:nth-child(4) { width: 25%; }
.village-building-table th:nth-child(5) { width: 11%; }
.village-building-table th:nth-child(6) { width: 23%; }

.village-unit-table th:nth-child(1) { width: 24%; }
.village-unit-table th:nth-child(2) { width: 10%; }
.village-unit-table th:nth-child(3) { width: 12%; }
.village-unit-table th:nth-child(4) { width: 25%; }
.village-unit-table th:nth-child(5) { width: 12%; }
.village-unit-table th:nth-child(6) { width: 17%; }

.village-table-name-cell {
    color: #f4dda0;
    font-weight: 700;
}

.village-table-name-cell > small,
.village-management-table td > small {
    display: block;
    margin-top: 2px;
    color: #ad9f87;
    font-weight: 400;
    line-height: 1.25;
}

.village-table-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.village-table-link:hover,
.village-table-link:focus-visible {
    border: 0;
    background: transparent;
    color: #ffd700;
    box-shadow: none;
    text-decoration: underline;
}

.village-table-status {
    display: inline-block;
    color: #c9b98e;
}

.village-table-status--active {
    color: #9dcc78;
}

.village-table-status--building,
.village-table-status--upgrading {
    color: #f1c55c;
}

.village-table-costs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
}

.village-table-costs > span {
    white-space: nowrap;
    color: #b9ac91;
}

.village-table-costs strong {
    color: #f0d57d;
}

.village-table-costs .is-insufficient strong {
    color: #ff8779;
}

.village-table-costs .is-population-cost strong {
    color: #d0b8ff;
}

/* Wiederverwendbare Ressourcen-Kostenanzeige */
.resource-cost-list {
    align-items: center;
}

.resource-cost-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.resource-cost-icon {
    display: inline-grid;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    place-items: center;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1;
}

.resource-cost-icon--asset img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.resource-cost-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.resource-cost-item > strong {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
}

.village-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.village-table-actions form {
    margin: 0;
}

.village-table-actions button,
.village-table-training-form button {
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.15;
}

.village-table-action-primary {
    background: linear-gradient(to bottom, #8f6d22, #584014);
    border-color: #c99d35;
    color: #fff0ad;
}

.village-table-action-secondary,
.village-table-action-tertiary {
    background: linear-gradient(to bottom, #373027, #211b15);
    border-color: #75634b;
    color: #d8c8a6;
}

.village-table-action-tertiary {
    color: #b6d9a1;
}

.village-table-empty {
    padding: 18px !important;
    color: #a99d88;
    text-align: center !important;
}

@media (max-width: 900px) {
    .village-view-mode-tabs {
        display: flex;
        width: 100%;
        padding-left: 0;
    }

    .village-view-mode-tabs > button {
        flex: 1 1 0;
    }

    .village-view-mode-status {
        display: none;
    }

    .village-table-stack {
        padding: 8px;
    }
}

/* Dorfansichtsmodus: echte, nebeneinanderliegende Registerkarten statt Aktionsbuttons. */
form.village-view-mode-tabs[role="tablist"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: fit-content;
    max-width: 100%;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #766348 !important;
    background: transparent !important;
}

form.village-view-mode-tabs[role="tablist"] > button[role="tab"] {
    appearance: none;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 88px;
    min-height: 30px;
    padding: 5px 14px 4px !important;
    margin: 0 0 -1px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #bcae91 !important;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: none;
}

form.village-view-mode-tabs[role="tablist"] > button[role="tab"]:hover,
form.village-view-mode-tabs[role="tablist"] > button[role="tab"]:focus-visible {
    color: #f0d987 !important;
    background: rgba(214, 179, 76, .06) !important;
    border-bottom-color: rgba(214, 179, 76, .45) !important;
}

form.village-view-mode-tabs[role="tablist"] > button[role="tab"].is-active,
form.village-view-mode-tabs[role="tablist"] > button[role="tab"][aria-selected="true"] {
    color: #ffe18a !important;
    background: linear-gradient(to bottom, rgba(70, 54, 35, .35), rgba(27, 21, 16, .75)) !important;
    border-bottom-color: #e0b94c !important;
}

form.village-view-mode-tabs[role="tablist"] .village-view-mode-status {
    flex: 0 1 auto;
    white-space: nowrap;
}

@media (max-width: 520px) {
    form.village-view-mode-tabs[role="tablist"] {
        width: 100%;
    }
    form.village-view-mode-tabs[role="tablist"] > button[role="tab"] {
        flex: 1 1 50% !important;
    }
}

/* Signalwarte außerhalb der Dorfmauer und funktionaler Versammlungsplatz. */
.classic-map-building-tower {
    z-index: 4;
}
.classic-map-building-tower > .classic-map-building-link,
.classic-map-building-tower > .classic-map-building-link:hover,
.classic-map-building-tower > .classic-map-building-link:focus-visible {
    width: 48px;
    height: 72px;
    background: linear-gradient(90deg, #51473b, #8f806b 48%, #4b4136);
    border: 2px solid #2d261f;
    border-radius: 6px 6px 2px 2px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .42);
}
.classic-map-building-tower > .classic-map-building-link::before {
    display: block;
    left: -7px;
    right: -7px;
    top: -15px;
    height: 18px;
    border: 2px solid #2d261f;
    background: linear-gradient(135deg, #8d4b27, #bb7038);
    transform: none;
}
.classic-map-facility {
    z-index: 5;
}
.classic-map-facility button,
.classic-map-facility button:hover,
.classic-map-facility button:focus-visible {
    width: 70px;
    height: 52px;
    background: radial-gradient(circle at center, rgba(171, 129, 67, .95), rgba(91, 60, 31, .96));
    border: 2px solid #4b2b15;
    border-radius: 50%;
    box-shadow: 0 6px 9px rgba(0,0,0,.38);
}
.classic-map-facility button::before {
    display: none;
}
.classic-map-facility-name {
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(42, 27, 14, .86);
    color: #ffe8a0;
    font-size: 10px;
    white-space: nowrap;
}
.rally-point-window {
    width: min(760px, calc(100vw - 32px));
}
.rally-point-body {
    max-height: min(72vh, 720px);
    overflow: auto;
}
.rally-point-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: .7rem 0;
}
.rally-point-summary div {
    padding: .55rem;
    border: 1px solid rgba(234, 203, 119, .22);
    background: rgba(24, 18, 12, .35);
}
.rally-point-summary span,
.rally-point-summary strong {
    display: block;
}
.rally-point-summary span { color: #cbbfa9; font-size: .72rem; }
.rally-point-summary strong { color: #f2d36c; font-size: 1.05rem; }
.rally-point-table {
    width: 100%;
    border-collapse: collapse;
}
.rally-point-table th,
.rally-point-table td {
    padding: .35rem .45rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}
.rally-point-support-form {
    margin-top: .6rem;
    padding: .6rem;
    border: 1px solid rgba(234, 203, 119, .2);
    background: rgba(15, 12, 9, .28);
}
.rally-point-support-form header {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.rally-point-unit-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .35rem;
    margin-bottom: .55rem;
}
.rally-point-unit-selection label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px auto;
    align-items: center;
    gap: .3rem;
}
.rally-point-unit-selection input {
    width: 70px;
    min-width: 0;
}
.village-facility-table th:nth-child(1) { width: 24%; }
.village-facility-table th:nth-child(2) { width: 14%; }
.village-facility-table th:nth-child(3) { width: 42%; }
.village-facility-table th:nth-child(4) { width: 20%; }
@media (max-width: 720px) {
    .rally-point-summary { grid-template-columns: 1fr; }
    .rally-point-unit-selection { grid-template-columns: 1fr; }
}

/* Einheitliches dunkles Formsystem: keine browserabhängigen weißen Zahlenfelder. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
    color-scheme: dark;
    background: #17130f !important;
    color: #f3e8cf !important;
    border: 1px solid rgba(226, 190, 105, .42) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: #e0b85c !important;
    outline: 2px solid rgba(224, 184, 92, .22);
    outline-offset: 1px;
}
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.server-clock {
    display: inline-flex;
    align-items: center;
    min-width: 6.5rem;
    padding: .32rem .55rem;
    border: 1px solid rgba(226, 190, 105, .28);
    border-radius: .3rem;
    background: rgba(18, 14, 10, .72);
    color: #f2d36c;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
}
.attack-wave {
    margin: .8rem 0;
    padding: .75rem;
    border: 1px solid rgba(226, 190, 105, .28);
    background: rgba(12, 10, 8, .34);
}
.attack-wave legend { color: #f2d36c; font-weight: 700; padding: 0 .35rem; }
.attack-batch-target { display: grid; gap: .15rem; margin-bottom: .75rem; }
.attack-batch-target span { color: #cbbfa9; font-size: .75rem; text-transform: uppercase; }
.attack-batch-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.troop-available-button {
    display: inline;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e8c86d;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.troop-available-button:hover, .troop-available-button:focus-visible { color: #fff1b5; }

.classic-map-wall {
    opacity: calc(0.22 + var(--wall-progress, 0) * 0.78);
    border-width: calc(5px + var(--wall-progress, 0) * 11px);
    transition: opacity .2s ease, border-width .2s ease;
}

.classic-map-wall-unbuilt {
    border-style: dashed;
    filter: grayscale(0.8);
}

/* Zentrale Allianz-Auswahl und Allianz-Bibliothek. */
.alliance-selector {
    position: relative;
    display: grid;
    gap: .45rem;
    min-width: 0;
}
.alliance-selector-label {
    color: #d9c99f;
    font-size: .78rem;
    font-weight: 700;
}
.alliance-selector-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: stretch;
}
.alliance-selector-input-row input {
    width: 100%;
    min-width: 0;
}
.alliance-selector-library-button {
    white-space: nowrap;
}
.alliance-selector-live-results {
    position: absolute;
    z-index: 90;
    top: calc(100% - 1.8rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 1px;
    padding: .28rem;
    border: 1px solid rgba(226, 190, 105, .44);
    border-radius: .35rem;
    background: #17130f;
    box-shadow: 0 .75rem 1.8rem rgba(0, 0, 0, .5);
}
.alliance-selector-live-results[hidden] { display: none; }
.alliance-selector-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem;
    align-items: center;
}
.alliance-selector-result {
    display: block;
    width: 100%;
    min-width: 0;
    padding: .58rem .65rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: rgba(48, 38, 29, .84);
    color: #f3e8cf;
    text-align: left;
}
.alliance-selector-result:hover,
.alliance-selector-result:focus-visible,
.alliance-selector-result[aria-selected="true"] {
    border-color: rgba(226, 190, 105, .55);
    background: rgba(82, 63, 40, .92);
    color: #fff0a7;
}
.alliance-selector-result strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.alliance-selector-profile-link {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    color: #e8c86d;
    text-decoration: none;
}
.alliance-selector-profile-link:hover,
.alliance-selector-profile-link:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff1b5;
}
.alliance-selector-values {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: .2rem;
}
.alliance-selector-value {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: .35rem;
    padding: .28rem .38rem .28rem .52rem;
    border: 1px solid rgba(226, 190, 105, .32);
    border-radius: 999px;
    background: rgba(40, 31, 22, .9);
    color: #f1ddb0;
    font-size: .8rem;
}
.alliance-selector-value > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.alliance-selector-value button {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #e8c86d;
    line-height: 1;
}
.alliance-selector-value button:hover,
.alliance-selector-value button:focus-visible {
    background: rgba(173, 62, 45, .38);
    color: #fff;
}
.alliance-selector-hint {
    color: #a9987d;
    font-size: .72rem;
    line-height: 1.4;
}
.alliance-selector-empty {
    margin: .45rem;
    color: #b9aa91;
}
.alliance-selector-dialog {
    width: min(var(--ci-modal-inline-size, 48rem), calc(100vw - 2rem));
    max-height: min(var(--ci-modal-block-size, 52rem), 82vh);
    padding: 0;
    border: 1px solid #786246;
    border-radius: .5rem;
    background: #211a14;
    color: #f3e8cf;
    box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, .68);
}
.alliance-selector-dialog::backdrop {
    background: rgba(5, 4, 3, .76);
    backdrop-filter: blur(2px);
}
.alliance-selector-dialog-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: .75rem;
    max-height: min(var(--ci-modal-block-size, 52rem), 82vh);
    padding: 1rem;
}
.alliance-selector-dialog header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}
.alliance-selector-dialog h2 {
    margin: 0;
    color: #f2d36c;
    font-size: 1.25rem;
}
.alliance-selector-dialog-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
}
.alliance-selector-library-results {
    display: grid;
    gap: .3rem;
    min-height: 8rem;
    max-height: 52vh;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: .15rem;
}
.alliance-selector-load-more {
    justify-self: center;
}
.forum-access-selector,
.message-recipient-group .alliance-selector {
    margin-top: .5rem;
}
.alliance-war-action-card .alliance-selector,
.alliance-diplomacy-form .alliance-selector,
.alliance-war-declaration-target .alliance-selector {
    width: 100%;
}
@media (max-width: 620px) {
    .alliance-selector-input-row,
    .alliance-selector-dialog-search {
        grid-template-columns: 1fr;
    }
    .alliance-selector-library-button,
    .alliance-selector-dialog-search button {
        width: 100%;
    }
    .alliance-selector-dialog-shell {
        padding: .75rem;
    }
}

/* Gemeinsame Chat-Sichtbarkeit und persistenter Dock-Zustand */
.ci-chat-list-mode,
.ci-chat-conversation-visibility {
    appearance: none;
    border: 1px solid rgba(238, 205, 122, .25);
    background: rgba(13, 11, 9, .44);
    color: #eee4d4;
    font: inherit;
    cursor: pointer;
}

.ci-chat-list-mode {
    min-height: 22px;
    padding: .16rem .34rem;
    border-radius: 4px;
    font-size: .62rem;
    white-space: nowrap;
}

.ci-chat-list-mode:hover,
.ci-chat-list-mode:focus-visible,
.ci-chat-conversation-visibility:hover,
.ci-chat-conversation-visibility:focus-visible {
    border-color: rgba(246, 213, 123, .7);
    color: #fff0a8;
    outline: none;
}

.ci-chat-conversation-action-cell {
    width: 25px;
    padding: 0 .1rem 0 0;
    text-align: center;
}

.ci-chat-conversation-visibility {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 3px;
    font-size: .72rem;
    line-height: 1;
}

/* Pop-out-Chat: kompakte, dynamische Kategorien, feste Eingabe und Gruppenverwaltung */
.ci-chat-shell {
    --chat-window-width: 340px;
    --chat-window-height: 530px;
    font-size: 12px;
}

.ci-chat-friends-view,
.ci-chat-list {
    display: grid;
    align-content: start;
    gap: .28rem;
    padding: .28rem;
}

.ci-chat-dock-section {
    min-width: 0;
    border: 1px solid rgba(238, 205, 122, .13);
    border-radius: 5px;
    background: rgba(7, 6, 5, .18);
    overflow: hidden;
}

.ci-chat-dock-section-heading {
    appearance: none;
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
    width: 100%;
    min-height: 25px;
    padding: .24rem .38rem;
    border: 0;
    border-bottom: 1px solid rgba(238, 205, 122, .12);
    background: rgba(13, 10, 8, .55);
    color: #f2d36c;
    font: inherit;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.ci-chat-dock-section-heading:hover,
.ci-chat-dock-section-heading:focus-visible {
    background: rgba(242, 211, 108, .08);
    color: #fff0a8;
    outline: none;
}

.ci-chat-dock-section-arrow {
    display: inline-block;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform .12s ease;
}

.ci-chat-dock-section[data-collapsed] .ci-chat-dock-section-arrow {
    transform: rotate(-90deg);
}

.ci-chat-dock-section[data-collapsed] .ci-chat-dock-section-heading {
    border-bottom-color: transparent;
}

.ci-chat-dock-section-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ci-chat-dock-section-count {
    color: rgba(238, 228, 212, .64);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.ci-chat-dock-section-body {
    display: grid;
    align-content: start;
    min-width: 0;
}

.ci-chat-dock-section-body[hidden],
.ci-chat-dock-section[data-collapsed] > .ci-chat-dock-section-body {
    display: none !important;
}

.ci-chat-contact-row,
.ci-chat-conversation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .2rem;
    min-height: 25px;
    padding: .1rem .2rem .1rem .34rem;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ci-chat-conversation-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.ci-chat-contact-row:last-child,
.ci-chat-conversation-row:last-child {
    border-bottom: 0;
}

.ci-chat-contact-row:hover,
.ci-chat-conversation-row:hover,
.ci-chat-contact-row:focus-within,
.ci-chat-conversation-row:focus-within {
    background: rgba(242, 211, 108, .07);
}

.ci-chat-contact-name-action,
.ci-chat-conversation-name-action {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 22px;
    padding: .2rem .08rem;
    overflow: visible;
    border: 0;
    background: transparent;
    color: #eee4d4;
    font: inherit;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.18;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ci-chat-contact-name-action:hover,
.ci-chat-contact-name-action:focus-visible,
.ci-chat-conversation-name-action:hover,
.ci-chat-conversation-name-action:focus-visible {
    color: #fff0a8;
    outline: none;
}

.ci-chat-profile-link,
.ci-chat-conversation-visibility {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(238, 205, 122, .18);
    border-radius: 3px;
    background: rgba(13, 11, 9, .38);
    color: rgba(232, 202, 114, .8);
    font-size: .68rem;
    line-height: 1;
    text-decoration: none;
}

.ci-chat-conversation-meta {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ci-chat-conversation-meta .ci-chat-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 .22rem;
    font-size: .58rem;
}

.ci-chat-group-create-action,
.ci-chat-group-submit,
.ci-chat-group-manage,
.ci-chat-history-hint {
    appearance: none;
    border: 1px solid rgba(238, 205, 122, .25);
    border-radius: 4px;
    background: rgba(80, 58, 23, .32);
    color: #f2d36c;
    font: inherit;
    font-size: .66rem;
    font-weight: 700;
    cursor: pointer;
}

.ci-chat-group-create-action {
    justify-self: stretch;
    margin: .22rem .3rem;
    padding: .28rem .4rem;
    text-align: left;
}

.ci-chat-group-create-action:hover,
.ci-chat-group-create-action:focus-visible,
.ci-chat-group-submit:hover,
.ci-chat-group-submit:focus-visible,
.ci-chat-group-manage:hover,
.ci-chat-group-manage:focus-visible,
.ci-chat-history-hint:hover,
.ci-chat-history-hint:focus-visible {
    border-color: rgba(246, 213, 123, .7);
    color: #fff0a8;
    outline: none;
}

.ci-chat-chats-view {
    height: 100%;
    overflow: hidden;
}

.ci-chat-list {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ci-chat-conversation {
    display: grid;
    grid-template:
        "bar" auto
        "status" auto
        "history" auto
        "messages" minmax(0, 1fr)
        "compose" auto
        / minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.ci-chat-conversation-bar { grid-area: bar; }
.ci-chat-status { grid-area: status; }
.ci-chat-history-hint { grid-area: history; }
.ci-chat-messages { grid-area: messages; }
.ci-chat-compose {
    grid-area: compose;
    position: relative;
    z-index: 2;
    align-self: end;
}

.ci-chat-conversation-bar {
    min-height: 34px;
    gap: .3rem;
    padding: .28rem .36rem;
}

.ci-chat-conversation-title {
    min-width: 0;
    font-size: .72rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ci-chat-group-manage {
    position: relative;
    z-index: 3;
    flex: 0 0 25px;
    width: 25px;
    height: 23px;
    padding: 0;
    pointer-events: auto;
}

.ci-chat-history-hint {
    justify-self: center;
    margin: .2rem auto 0;
    padding: .2rem .45rem;
}

.ci-chat-messages {
    padding: .3rem;
}

.ci-chat-message {
    max-width: 92%;
    margin-bottom: .3rem;
    padding: .34rem .42rem;
}

.ci-chat-message-meta {
    gap: .35rem;
    margin-bottom: .12rem;
    font-size: .58rem;
}

.ci-chat-message-body {
    font-size: .7rem;
    line-height: 1.34;
}

.ci-chat-compose {
    grid-template-columns: minmax(0, 1fr) 34px;
    padding: .34rem;
}

.ci-chat-input {
    box-sizing: border-box;
    height: 5.15em;
    min-height: 5.15em;
    max-height: 5.15em;
    padding: .38rem .44rem;
    overflow-y: auto;
    resize: none;
    font-size: .7rem;
    line-height: 1.35;
}

.ci-chat-send {
    min-width: 34px;
}

.ci-chat-empty,
.ci-chat-status {
    margin: .28rem .36rem;
    font-size: .65rem;
    line-height: 1.3;
}

.ci-chat-group-dialog-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    padding: .45rem;
    background: rgba(4, 3, 3, .78);
}

.ci-chat-group-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-height: 100%;
    border: 1px solid rgba(238, 205, 122, .32);
    border-radius: 6px;
    background: linear-gradient(180deg, #2b2119, #17130f);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.ci-chat-group-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-height: 34px;
    padding: .3rem .38rem;
    border-bottom: 1px solid rgba(238, 205, 122, .18);
    color: #f2d36c;
    font-size: .72rem;
}

.ci-chat-group-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: .32rem;
    min-height: 0;
    padding: .38rem;
}

.ci-chat-group-title-label {
    display: grid;
    gap: .18rem;
    color: #f2d36c;
    font-size: .64rem;
    font-weight: 700;
}

.ci-chat-group-title-label input {
    width: 100%;
    min-height: 27px;
    border: 1px solid rgba(238, 205, 122, .23);
    border-radius: 4px;
    padding: .3rem .38rem;
    background: rgba(7, 6, 5, .65);
    color: #f2eadc;
    font: inherit;
    font-size: .7rem;
}

.ci-chat-group-contacts {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(238, 205, 122, .12);
    border-radius: 4px;
}

.ci-chat-group-contact-heading {
    position: sticky;
    top: 0;
    display: block;
    padding: .24rem .34rem;
    background: #211913;
    color: #f2d36c;
    font-size: .62rem;
    text-transform: uppercase;
}

.ci-chat-group-contact-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .3rem;
    padding: .25rem .34rem;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    font-size: .68rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ci-chat-group-submit {
    min-height: 28px;
    padding: .28rem .45rem;
}

@media (max-width: 520px) {
    .ci-chat-shell {
        --chat-window-width: calc(100vw - 16px);
        --chat-window-height: min(560px, calc(100vh - 76px));
    }
}

/* Allianz-Bewerbung: getrennte, optionale Ablehnungsbegründung ohne JavaScript-Zwang. */
.alliance-application-review-actions {
    display: flex;
    flex: 0 1 360px;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .55rem;
    min-width: 0;
}
.alliance-application-accept-form {
    flex: 0 0 auto;
    margin: 0;
}
.alliance-application-decline-panel {
    flex: 1 1 260px;
    min-width: min(100%, 240px);
    max-width: 420px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .55rem;
    background: rgba(0,0,0,.1);
}
.alliance-application-decline-panel > summary {
    cursor: pointer;
    padding: .55rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}
.alliance-application-decline-form {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0 .7rem .7rem;
}
.alliance-application-decline-form label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
.alliance-application-decline-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    resize: vertical;
}
.alliance-application-decline-form small {
    opacity: .72;
    font-weight: 400;
}
@media (max-width: 720px) {
    .alliance-application-review-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .alliance-application-accept-form button,
    .alliance-application-decline-panel {
        width: 100%;
        max-width: none;
    }
}


/* ========== FLUSSSICHERE SEITENKÖPFE, BERICHTE UND FORMULARAKTIONEN ========== */
/*
 * Aktionsflächen bleiben Teil des normalen Dokumentflusses. Dadurch können
 * lange Titel, Zeitstempel, Übersetzungen und mehrere Buttons weder auf
 * Berichts- noch auf Formularseiten überdeckt werden.
 */
.app-page-header {
    flex-wrap: wrap;
}

.app-page-header > :first-child {
    flex: 1 1 18rem;
    min-width: 0;
}

.app-page-header > :not(:first-child) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.app-page-header > form,
.app-page-header > :is(.player-area-hero-actions, .alliance-page-header-actions, .alliance-directory-header-actions, .alliance-ranking-header-actions, .game-dashboard-hero-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--ui-space-2);
}

.app-page-header :is(a.btn, button, .button),
.player-area-form-actions :is(a.btn, button, .button) {
    position: static;
    inset: auto;
    max-width: 100%;
}

.app-page-header :is(h1, h2, h3, p, time),
.player-area-panel-header :is(h2, h3, p),
.combat-report-list-heading :is(strong, span, time),
.combat-report-participant > header :is(h2, small, a),
.troop-overview-group > header :is(h2, p, span) {
    overflow-wrap: anywhere;
}

.player-area-panel-header,
.player-area-form-actions,
.combat-report-list-heading,
.combat-report-result,
.combat-report-participant > header,
.troop-overview-group > header {
    flex-wrap: wrap;
}

.player-area-panel-header > :first-child,
.combat-report-list-heading > :first-child,
.combat-report-result > :first-child,
.combat-report-participant > header > :first-child,
.troop-overview-group > header > :first-child {
    min-width: 0;
}

.player-area-form-actions {
    position: static;
    clear: both;
    min-width: 0;
    max-width: 100%;
}

.player-area-form-actions > * {
    position: static;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 760px) {
    .app-page-header > form,
    .app-page-header > :is(.player-area-hero-actions, .alliance-page-header-actions, .alliance-directory-header-actions, .alliance-ranking-header-actions, .game-dashboard-hero-actions) {
        width: 100%;
        justify-content: flex-start;
    }

    .app-page-header > form :is(.btn, button, .button),
    .app-page-header > :is(.player-area-hero-actions, .alliance-page-header-actions, .alliance-directory-header-actions, .alliance-ranking-header-actions, .game-dashboard-hero-actions) :is(.btn, button, .button) {
        flex: 1 1 12rem;
    }
}


.building-construction-cancel-feedback {
    margin: 0 0 0.75rem;
}

.building-construction-cancel-feedback[hidden] {
    display: none;
}

.classic-build-queue-cancel-unavailable {
    display: block;
    margin-top: 0.35rem;
    line-height: 1.35;
    opacity: 0.78;
}

/* Serielle Truppenausbildung */
.village-unit-table-wrap {
    overflow-x: hidden;
    scrollbar-gutter: auto;
}

.village-unit-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.village-unit-table th:nth-child(1) { width: 20%; }
.village-unit-table th:nth-child(2) { width: 10%; }
.village-unit-table th:nth-child(3) { width: 9%; }
.village-unit-table th:nth-child(4) { width: 30%; }
.village-unit-table th:nth-child(5) { width: 13%; }
.village-unit-table th:nth-child(6) { width: 18%; }

.village-unit-table th,
.village-unit-table td {
    padding: 5px 6px;
}

.village-unit-table thead th {
    overflow-wrap: normal;
    word-break: normal;
}

.village-unit-table tbody td,
.village-unit-table .village-table-name-cell {
    overflow-wrap: anywhere;
}

.village-unit-training-cell {
    min-width: 0;
    padding-block: 4px !important;
}

.village-table-training-form.unit-training-preview {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) 5.75rem minmax(5.75rem, 6.75rem);
    align-items: center;
    gap: .3rem .5rem;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.village-table-training-form.unit-training-preview > * {
    min-width: 0;
    max-width: 100%;
}

.unit-training-quantity {
    display: block;
    min-width: 0;
}

.unit-training-quantity span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.unit-training-quantity input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 28px;
    padding: 3px 5px;
    text-align: center;
}

.village-table-training-form .village-table-costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.2;
}

.village-table-training-form .village-table-costs > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    min-width: 0;
    white-space: normal;
}

.village-table-training-form .village-table-costs strong {
    flex: 0 0 auto;
}

.unit-training-duration-preview {
    display: block;
    min-width: 0;
    color: #f0d57d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.village-table-training-form button {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 4px 5px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
}

.village-unit-table-section th {
    padding: 7px 8px;
    border-top: 1px solid rgba(201, 157, 53, .5);
    border-bottom: 1px solid rgba(201, 157, 53, .35);
    background: linear-gradient(90deg, rgba(143, 109, 34, .2), rgba(29, 24, 19, .95));
    color: #f1d98a;
    letter-spacing: .02em;
    text-transform: none;
}

.village-unit-table-section th > strong,
.village-unit-table-section th > small {
    display: block;
}

.village-unit-table-section th > small {
    margin-top: 2px;
    color: #aa9d86;
    font-size: 11px;
    font-weight: 400;
}

.village-unit-table-section.is-locked th {
    background: linear-gradient(90deg, rgba(88, 78, 67, .2), rgba(24, 21, 18, .97));
    color: #b9ad98;
}

.village-unit-row.is-prerequisite-locked {
    opacity: .48;
    filter: grayscale(.35);
}

.village-unit-row.is-prerequisite-locked:hover {
    opacity: .62;
}

.village-unit-row.is-prerequisite-locked :is(input, button) {
    cursor: not-allowed;
}

.unit-training-queue-heading,
.unit-training-queue-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.unit-training-queue-heading small { text-align: right; }
.unit-training-queue-controls { display: flex; gap: .35rem; }
.unit-training-queue-controls form { margin: 0; }
.unit-training-queue-controls button { min-width: 2rem; min-height: 2rem; padding: .2rem .5rem; }
.classic-unit-training-task.is-waiting .classic-build-queue-progress span { opacity: .6; }

@media (max-width: 900px) {
    .village-unit-table th:nth-child(1) { width: 20%; }
    .village-unit-table th:nth-child(2) { width: 10%; }
    .village-unit-table th:nth-child(3) { width: 10%; }
    .village-unit-table th:nth-child(4) { width: 29%; }
    .village-unit-table th:nth-child(5) { width: 13%; }
    .village-unit-table th:nth-child(6) { width: 18%; }

    .village-table-training-form.unit-training-preview {
        grid-template-columns: 4.25rem minmax(0, 1fr) 5.25rem minmax(5.5rem, 6.25rem);
        gap: .3rem .4rem;
    }

    .village-table-training-form .village-table-costs {
        grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
        gap-inline: 6px;
        font-size: 10px;
    }

    .unit-training-queue-heading,
    .unit-training-queue-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .village-unit-table th,
    .village-unit-table td {
        padding: 4px;
    }

    .village-unit-table th:nth-child(1) { width: 22%; }
    .village-unit-table th:nth-child(2) { width: 10%; }
    .village-unit-table th:nth-child(3) { width: 10%; }
    .village-unit-table th:nth-child(4) { width: 27%; }
    .village-unit-table th:nth-child(5) { width: 14%; }
    .village-unit-table th:nth-child(6) { width: 17%; }

    .village-unit-table thead th {
        font-size: 9px;
        letter-spacing: 0;
    }

    .village-table-training-form.unit-training-preview {
        grid-template-columns: minmax(4rem, .8fr) minmax(5rem, 1.2fr);
        gap: 4px;
    }

    .unit-training-quantity {
        grid-column: 1;
        grid-row: 1;
    }

    .unit-training-duration-preview {
        grid-column: 2;
        grid-row: 1;
    }

    .village-table-training-form .village-table-costs {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .village-table-training-form button {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .village-unit-table,
    .village-unit-table tbody {
        display: block;
    }

    .village-unit-table thead {
        display: none;
    }

    .village-unit-table-section,
    .village-unit-table-section th {
        display: block;
        width: auto !important;
    }

    .village-unit-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .village-unit-row > .village-table-name-cell,
    .village-unit-row > td:not(.village-unit-training-cell) {
        display: block;
        width: auto !important;
        border-bottom: 0;
    }

    .village-unit-row > .village-table-name-cell {
        grid-column: 1;
        padding: 8px 6px 4px;
    }

    .village-unit-row > td:not(.village-unit-training-cell) {
        grid-column: 2;
        padding: 8px 6px 4px;
        text-align: right;
        white-space: nowrap;
    }

    .village-unit-row > td:not(.village-unit-training-cell)::before {
        content: 'Bestand: ';
        color: #9f927d;
        font-size: 9px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .village-unit-training-cell {
        display: block;
        grid-column: 1 / -1;
        width: auto !important;
        padding: 4px 6px 8px !important;
        border-bottom: 1px solid rgba(139, 115, 85, .42);
    }

    .village-table-training-form.unit-training-preview {
        grid-template-columns: minmax(4.5rem, .8fr) minmax(6rem, 1.2fr);
    }
}

@media (max-width: 400px) {
    .village-table-training-form .village-table-costs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Adelshof: atomare Sammelprägung mit dynamischer Gesamtkostenvorschau. */
.noble-coin-mint-form {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(139, 115, 85, 0.72);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.16);
}

.noble-coin-mint-quantity span,
.noble-coin-mint-total > span {
    color: #c8baa1;
    font-size: 11px;
    font-weight: 700;
}

.noble-coin-mint-total {
    gap: 7px;
}

.noble-coin-mint-total .unit-training-costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 5px;
}

.noble-coin-mint-summary {
    margin: 0;
    color: #c8baa1;
    font-size: 12px;
}

.noble-coin-mint-summary strong {
    color: #f0d77a;
}

/* Paket 04.1: kompakte Dorfzentrum-Bauverwaltung mit Registerkarten */
.village-center-management {
    display: grid;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.village-center-management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
}

.village-center-management-header > div {
    min-width: 0;
}

.village-center-management-header h4,
.village-center-orders h4,
.village-center-buildings h4,
.village-center-requirements h4 {
    margin: 0 0 .12rem;
}

.village-center-management-header p,
.village-center-section-heading p {
    margin: 0;
    color: #b9ad98;
    font-size: .72rem;
    line-height: 1.3;
}

.village-center-queue-capacity {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
    border: 1px solid rgba(212, 175, 55, .38);
    border-radius: .25rem;
    padding: .3rem .5rem;
    color: #f1d98a;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(20, 16, 12, .72);
}

.village-center-tabs {
    position: sticky;
    top: -16px;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem;
    min-width: 0;
    padding: .4rem 0;
    background: linear-gradient(to bottom, #30271f 80%, rgba(48, 39, 31, 0));
}

.village-center-tabs button {
    min-width: 0;
    min-height: 2.15rem;
    padding: .38rem .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid #65533c;
    background: #211a14;
    color: #cbbd9e;
    box-shadow: none;
    font-size: .73rem;
    letter-spacing: .01em;
    text-transform: none;
}

.village-center-tabs button:hover,
.village-center-tabs button:focus-visible {
    transform: none;
    border-color: #d4af37;
    background: #35291e;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .16);
}

.village-center-tabs button.is-active,
.village-center-tabs button[aria-selected="true"] {
    border-color: #d4af37;
    background: linear-gradient(to bottom, #59411f, #302317);
    color: #ffe58c;
}

.village-center-tabs button small {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    min-height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    color: #1b150f;
    background: #d4af37;
    font-size: .62rem;
}

.village-center-tab-panels,
.village-center-tab-panels > [role="tabpanel"] {
    min-width: 0;
}

.village-center-tab-panels > [role="tabpanel"][hidden] {
    display: none;
}

.village-center-overview-toolbar {
    display: grid;
    grid-template-columns: minmax(24rem, 1.45fr) minmax(22rem, 1fr);
    gap: .55rem;
    align-items: center;
    min-width: 0;
    margin-bottom: .55rem;
}

.village-center-rename-form--compact {
    display: grid;
    grid-template-columns: auto minmax(10rem, 1fr) auto;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin: 0;
}

.village-center-rename-form--compact label {
    margin: 0;
    color: #d4af37;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.village-center-rename-form--compact input {
    width: 100%;
    min-width: 0;
    height: 2rem;
    padding: .32rem .5rem;
}

.village-center-rename-form--compact button {
    width: auto;
    min-height: 2rem;
    padding: .35rem .65rem;
    white-space: nowrap;
}

.village-center-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(139, 115, 85, .42);
    border-radius: .25rem;
    background: rgba(13, 10, 8, .34);
    overflow: hidden;
}

.village-center-summary-strip > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 0;
    padding: .38rem .42rem;
    border-right: 1px solid rgba(139, 115, 85, .3);
}

.village-center-summary-strip > div:last-child {
    border-right: 0;
}

.village-center-summary-strip dt,
.village-center-summary-strip dd {
    margin: 0;
}

.village-center-summary-strip dt {
    color: #aa9b82;
    font-size: .62rem;
    text-transform: uppercase;
}

.village-center-summary-strip dd {
    color: #f1d98a;
    font-size: .78rem;
    font-weight: 700;
}

.village-center-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 0 .38rem;
}

.village-center-section-heading--compact h4 {
    font-size: .76rem;
}

.village-center-orders,
.village-center-buildings,
.village-center-requirements {
    min-width: 0;
}

.village-center-empty-state {
    margin: 0;
    padding: .7rem;
    border: 1px dashed rgba(139, 115, 85, .5);
    border-radius: .25rem;
    color: #b9ad98;
    text-align: center;
    background: rgba(13, 10, 8, .28);
}

.village-center-table-frame {
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(139, 115, 85, .5);
    border-radius: .28rem;
    background: rgba(18, 14, 10, .38);
    overflow: clip;
}

.village-center-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .71rem;
}

.village-center-table thead th {
    position: sticky;
    top: 2.9rem;
    z-index: 5;
    padding: .36rem .48rem;
    border-bottom: 1px solid rgba(212, 175, 55, .45);
    color: #ead48f;
    background: #211a14;
    font-size: .63rem;
    line-height: 1.15;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.village-center-table tbody tr {
    background: rgba(49, 38, 28, .64);
}

.village-center-table tbody tr:nth-child(even) {
    background: rgba(37, 29, 22, .72);
}

.village-center-table tbody tr:hover,
.village-center-table tbody tr:focus-within {
    background: rgba(78, 58, 32, .72);
}

.village-center-table th[scope="row"],
.village-center-table td {
    min-width: 0;
    height: 2.65rem;
    padding: .34rem .48rem;
    border-bottom: 1px solid rgba(139, 115, 85, .28);
    color: #d9cba9;
    line-height: 1.2;
    vertical-align: middle;
    overflow: hidden;
}

.village-center-table tbody tr:last-child > * {
    border-bottom: 0;
}

.village-center-table th[scope="row"] {
    font-weight: 700;
    text-align: left;
}

.village-center-table small {
    display: block;
    margin-top: .12rem;
    color: #a99a80;
    font-size: .61rem;
    line-height: 1.15;
}

.village-center-table-action-heading,
.village-center-action-cell {
    text-align: right !important;
}

.village-center-building-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #eadbb8;
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-transform: none;
}

.village-center-building-link:hover,
.village-center-building-link:focus-visible {
    transform: none;
    color: #ffe58c;
    box-shadow: none;
}

.village-center-building-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    text-align: center;
}

.village-center-building-name,
.village-center-order-building,
.village-center-requirement-building,
.village-center-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.village-center-level-cell strong {
    color: #f1d98a;
}

.village-center-numeric-cell {
    color: #eadbb8;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.village-center-cost-cell {
    white-space: nowrap;
}

.village-center-population-cost.is-insufficient {
    color: #ef9a8e;
    font-weight: 700;
}

.resource-cost-list--compact {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .32rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

.resource-cost-list--compact .resource-cost-item {
    flex: 0 1 auto;
    min-width: 0;
    gap: .1rem;
    font-size: .68rem;
}

.resource-cost-list--compact .resource-cost-label {
    display: none;
}

.resource-cost-list--compact strong {
    font-variant-numeric: tabular-nums;
}

.village-center-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.35rem;
    padding: .12rem .38rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.village-center-status-button {
    width: auto;
    box-shadow: none;
    text-transform: none;
}

.village-center-status-button:hover,
.village-center-status-button:focus-visible {
    transform: none;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .18);
}

.village-center-status--locked,
.village-center-status--queue_full,
.village-center-status--insufficient_resources {
    color: #ef9a8e;
    background: rgba(130, 48, 42, .18);
}

.village-center-status--ready,
.village-center-status--queued,
.village-center-status--maximum {
    color: #9fdf68;
    background: rgba(67, 111, 48, .16);
}

.village-center-building-row--locked,
.village-center-building-row--maximum {
    opacity: .78;
}

.village-center-action-cell form {
    width: auto;
    margin: 0;
}

.village-center-build-action,
.village-center-row-action {
    width: auto;
    max-width: 100%;
    min-height: 1.75rem;
    padding: .28rem .52rem;
    font-size: .67rem;
    line-height: 1.1;
    white-space: nowrap;
    text-transform: none;
}

.village-center-build-action:disabled {
    opacity: .62;
}

.village-center-order-position {
    color: #d4af37;
    font-weight: 700;
    text-align: center;
}

.village-center-order-row.is-active-order > :first-child {
    box-shadow: inset .2rem 0 0 rgba(89, 154, 75, .9);
}

.village-center-order-row.is-waiting-order > :first-child {
    box-shadow: inset .2rem 0 0 rgba(194, 144, 45, .82);
}

.village-center-progress-cell progress {
    display: block;
    width: 100%;
    height: .28rem;
    margin-top: .18rem;
    accent-color: #d4af37;
}

.village-center-refund-cell {
    min-width: 0;
}

.village-center-muted {
    color: #8f826f;
}

.village-center-inline-requirements {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #efb09f;
}

.village-center-requirement-row:focus {
    outline: 2px solid #d4af37;
    outline-offset: -2px;
    background: rgba(91, 66, 31, .88);
}

.village-center-requirement-row.is-navigation-target {
    animation: village-center-row-highlight 1.5s ease-out;
}

@keyframes village-center-row-highlight {
    0%, 35% { background: rgba(125, 89, 35, .95); }
    100% { background: inherit; }
}

.village-center-col-building { width: 19%; }
.village-center-col-level { width: 9%; }
.village-center-col-costs { width: 25%; }
.village-center-col-duration { width: 10%; }
.village-center-col-population { width: 7%; }
.village-center-col-status { width: 13%; }
.village-center-col-action { width: 17%; }

.village-center-col-position { width: 5%; }
.village-center-col-order-building { width: 20%; }
.village-center-col-order-state { width: 10%; }
.village-center-col-order-time { width: 12%; }
.village-center-col-order-progress { width: 12%; }
.village-center-col-order-refund { width: 27%; }
.village-center-col-order-action { width: 14%; }

.village-center-col-requirement-building { width: 20%; }
.village-center-col-requirement-target { width: 10%; }
.village-center-col-requirement-levels { width: 28%; }
.village-center-col-requirement-block { width: 28%; }
.village-center-col-requirement-action { width: 14%; }

@media (max-width: 980px) {
    .village-center-overview-toolbar {
        grid-template-columns: 1fr;
    }

    .village-center-table {
        font-size: .68rem;
    }

    .village-center-table th[scope="row"],
    .village-center-table td,
    .village-center-table thead th {
        padding-left: .36rem;
        padding-right: .36rem;
    }
}

@media (max-width: 760px) {
    .ci-modal-surface[data-modal-size] {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .building-modal-body {
        padding: 10px;
    }

    .village-center-tabs {
        top: -10px;
    }

    .village-center-management-header {
        align-items: flex-start;
    }

    .village-center-rename-form--compact {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .village-center-table-frame {
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .village-center-table,
    .village-center-table tbody,
    .village-center-table tr {
        display: block;
        width: 100%;
    }

    .village-center-table colgroup,
    .village-center-table thead {
        display: none;
    }

    .village-center-table tbody {
        display: grid;
        gap: .42rem;
    }

    .village-center-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid rgba(139, 115, 85, .5);
        border-radius: .28rem;
        overflow: hidden;
    }

    .village-center-table th[scope="row"],
    .village-center-table td {
        display: grid;
        grid-template-columns: minmax(5.8rem, .75fr) minmax(0, 1.25fr);
        align-items: center;
        gap: .4rem;
        width: auto;
        height: auto;
        min-height: 2.2rem;
        padding: .32rem .42rem;
        border-right: 0;
        text-align: left !important;
        overflow: hidden;
    }

    .village-center-table th[scope="row"]::before,
    .village-center-table td::before {
        content: attr(data-label);
        color: #9f927d;
        font-size: .58rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .village-center-action-cell form,
    .village-center-action-cell button {
        justify-self: start;
    }

    .village-center-order-row.is-active-order > :first-child,
    .village-center-order-row.is-waiting-order > :first-child {
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    .village-center-management-header {
        display: grid;
    }

    .village-center-queue-capacity {
        justify-self: start;
    }

    .village-center-tabs {
        position: static;
        grid-template-columns: 1fr;
    }

    .village-center-rename-form--compact {
        grid-template-columns: 1fr auto;
    }

    .village-center-rename-form--compact label {
        grid-column: 1 / -1;
    }

    .village-center-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .village-center-summary-strip > div:nth-child(2) {
        border-right: 0;
    }

    .village-center-summary-strip > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(139, 115, 85, .3);
    }

    .village-center-table tbody tr {
        grid-template-columns: 1fr;
    }
}

/* Paket 04.3: gemeinsame kompakte Datentabellen für Dorfverwaltung und Wirtschaft. */
.ci-compact-table-frame {
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(139, 115, 85, .5);
    border-radius: .28rem;
    background: rgba(18, 14, 10, .38);
    overflow: clip;
}

.ci-compact-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .71rem;
}

.ci-compact-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .36rem .48rem;
    border-bottom: 1px solid rgba(212, 175, 55, .45);
    color: #ead48f;
    background: #211a14;
    font-size: .63rem;
    line-height: 1.15;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.ci-compact-table tbody tr {
    background: rgba(49, 38, 28, .64);
}

.ci-compact-table tbody tr:nth-child(even) {
    background: rgba(37, 29, 22, .72);
}

.ci-compact-table tbody tr:hover,
.ci-compact-table tbody tr:focus-within {
    background: rgba(78, 58, 32, .72);
}

.ci-compact-table th[scope="row"],
.ci-compact-table td {
    min-width: 0;
    height: 2.55rem;
    padding: .32rem .48rem;
    border-bottom: 1px solid rgba(139, 115, 85, .28);
    color: #d9cba9;
    line-height: 1.2;
    vertical-align: middle;
    overflow: hidden;
}

.ci-compact-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ci-compact-table th[scope="row"] {
    font-weight: 700;
    text-align: left;
}

.ci-compact-numeric-heading,
.ci-compact-numeric-cell {
    text-align: right !important;
}

.ci-compact-numeric-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ci-compact-numeric-cell.is-positive {
    color: #b9e584;
    font-weight: 700;
}

.ci-compact-primary-label {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-width: 0;
    color: #eadbb8;
    white-space: nowrap;
}

.ci-compact-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.3rem;
    padding: .1rem .36rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-compact-status--active,
.ci-compact-status--available {
    color: #9fdf68;
    background: rgba(67, 111, 48, .16);
}

.ci-compact-status--paused,
.ci-compact-status--full {
    color: #f1c76e;
    background: rgba(139, 96, 28, .18);
}

.ci-compact-status--inactive,
.ci-compact-status--overflow {
    color: #ef9a8e;
    background: rgba(130, 48, 42, .18);
}

.ci-compact-status--unbounded {
    color: #b9ad98;
    background: rgba(78, 71, 62, .2);
}

.building-economy-overview {
    display: grid;
    gap: .45rem;
    min-width: 0;
    margin: 0 0 .7rem;
}

.building-economy-tabs {
    position: sticky;
    top: -16px;
    z-index: 7;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem;
    min-width: 0;
    padding: .4rem 0;
    background: linear-gradient(to bottom, #30271f 80%, rgba(48, 39, 31, 0));
}

.building-economy-tabs button {
    min-width: 0;
    min-height: 2rem;
    padding: .34rem .5rem;
    border: 1px solid #65533c;
    background: #211a14;
    color: #cbbd9e;
    box-shadow: none;
    font-size: .71rem;
    letter-spacing: .01em;
    text-transform: none;
}

.building-economy-tabs button:hover,
.building-economy-tabs button:focus-visible {
    transform: none;
    border-color: #d4af37;
    background: #35291e;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, .16);
}

.building-economy-tabs button.is-active,
.building-economy-tabs button[aria-selected="true"] {
    border-color: #d4af37;
    background: linear-gradient(to bottom, #59411f, #302317);
    color: #ffe58c;
}

.building-economy-overview > [role="tabpanel"] {
    min-width: 0;
}

.building-economy-overview > [role="tabpanel"][hidden] {
    display: none;
}

.building-economy-table thead th {
    top: 2.75rem;
}

.building-economy-col-resource { width: 16%; }
.building-economy-col-amount { width: 12%; }
.building-economy-col-rate { width: 12%; }
.building-economy-col-day { width: 13%; }
.building-economy-col-factor { width: 9%; }
.building-economy-col-status { width: 12%; }
.building-economy-col-capacity { width: 13%; }
.building-economy-col-available { width: 12%; }
.building-economy-col-utilization { width: 11%; }
.building-economy-col-time { width: 12%; }
.building-economy-col-population-use { width: 52%; }
.building-economy-col-population-number { width: 16%; }

.building-economy-population-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    margin-bottom: .42rem;
    border: 1px solid rgba(139, 115, 85, .42);
    border-radius: .25rem;
    background: rgba(13, 10, 8, .34);
    overflow: hidden;
}

.building-economy-population-summary > span {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    min-width: 0;
    padding: .38rem .42rem;
    border-right: 1px solid rgba(139, 115, 85, .3);
}

.building-economy-population-summary > span:last-child {
    border-right: 0;
}

.building-economy-population-summary small {
    color: #aa9b82;
    font-size: .6rem;
    text-transform: uppercase;
}

.building-economy-population-summary strong {
    color: #f1d98a;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .ci-compact-table-frame {
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .ci-compact-table,
    .ci-compact-table tbody,
    .ci-compact-table tr {
        display: block;
        width: 100%;
    }

    .ci-compact-table colgroup,
    .ci-compact-table thead {
        display: none;
    }

    .ci-compact-table tbody {
        display: grid;
        gap: .42rem;
    }

    .ci-compact-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid rgba(139, 115, 85, .5);
        border-radius: .28rem;
        overflow: hidden;
    }

    .ci-compact-table th[scope="row"],
    .ci-compact-table td {
        display: grid;
        grid-template-columns: minmax(5.8rem, .75fr) minmax(0, 1.25fr);
        align-items: center;
        gap: .4rem;
        width: auto;
        height: auto;
        min-height: 2.15rem;
        padding: .3rem .4rem;
        text-align: left !important;
        overflow: hidden;
    }

    .ci-compact-table th[scope="row"]::before,
    .ci-compact-table td::before {
        content: attr(data-label);
        color: #9f927d;
        font-size: .58rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .building-economy-population-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .building-economy-population-summary > span {
        border-bottom: 1px solid rgba(139, 115, 85, .3);
    }

    .building-economy-population-summary > span:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 520px) {
    .building-economy-tabs {
        position: static;
        grid-template-columns: 1fr;
    }

    .ci-compact-table tbody tr {
        grid-template-columns: 1fr;
    }

    .building-economy-population-summary {
        grid-template-columns: 1fr;
    }

    .building-economy-population-summary > span {
        border-right: 0;
    }
}

/* Paket 04.3: Dorfzentrum behält seinen Tabellenkopf unter der eigenen Tab-Leiste. */
.ci-compact-table.village-center-table thead th {
    top: 2.9rem;
}

/* Paket 09: Versammlungsplatz */
.rally-point-workspace { display: grid; gap: .9rem; min-width: 0; }
.rally-point-tabs { display: flex; flex-wrap: wrap; gap: .45rem; border-bottom: 1px solid rgba(213,183,124,.32); padding-bottom: .55rem; }
.rally-point-tabs button { border: 1px solid rgba(213,183,124,.38); background: rgba(35,30,24,.82); color: #e8dcc8; border-radius: .45rem; padding: .55rem .8rem; cursor: pointer; }
.rally-point-tabs button.is-active { background: rgba(116,83,33,.72); color: #fff4c2; border-color: #d5b77c; }
.rally-point-panel { display: grid; gap: .85rem; min-width: 0; }
.rally-point-panel[hidden] { display: none !important; }
.rally-point-command-grid, .rally-point-aggregate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rally-point-aggregate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rally-point-target-search { display: grid; grid-template-columns: minmax(9rem,.45fr) minmax(12rem,1fr); gap: .65rem; align-items: end; }
.rally-point-target-search label, .rally-point-template-form label, .rally-point-share-form label { display: grid; gap: .28rem; min-width: 0; }
.rally-point-target-results, .rally-point-selected-target { grid-column: 1 / -1; }
.rally-point-target-results { display: grid; gap: .35rem; }
.rally-point-target-result { display: flex; justify-content: space-between; gap: .75rem; text-align: left; border: 1px solid rgba(213,183,124,.3); background: rgba(20,18,15,.72); color: inherit; border-radius: .4rem; padding: .55rem .7rem; cursor: pointer; }
.rally-point-target-result:hover, .rally-point-target-result:focus-visible { border-color: #d5b77c; }
.rally-point-target-result span { color: #cbbfa9; }
.rally-point-selected-target { margin: 0; padding: .5rem .65rem; border-left: 3px solid #d5b77c; background: rgba(20,18,15,.48); }
.rally-point-command-form { display: grid; gap: .75rem; align-content: start; }
.rally-point-command-form header h4, .rally-point-template-card h5, .rally-point-aggregate-card h5 { margin: 0; }
.rally-point-command-form header p { margin: .25rem 0 0; color: #cbbfa9; }
.rally-point-aggregate-card { border: 1px solid rgba(213,183,124,.28); border-radius: .5rem; padding: .7rem; background: rgba(20,18,15,.5); min-width: 0; }
.rally-point-aggregate-card dl { display: grid; gap: .25rem; margin: .55rem 0 0; }
.rally-point-aggregate-card dl div { display: flex; justify-content: space-between; gap: .5rem; }
.rally-point-aggregate-card dt { color: #cbbfa9; }
.rally-point-aggregate-card dd { margin: 0; font-weight: 700; text-align: right; }
.rally-point-template-form { display: grid; grid-template-columns: minmax(12rem,1fr) minmax(10rem,.5fr); gap: .65rem; }
.rally-point-template-description, .rally-point-template-form .rally-point-unit-selection, .rally-point-template-form-actions { grid-column: 1 / -1; }
.rally-point-template-list { display: grid; gap: .7rem; }
.rally-point-template-card { border: 1px solid rgba(213,183,124,.28); border-radius: .5rem; padding: .75rem; display: grid; gap: .6rem; background: rgba(20,18,15,.48); }
.rally-point-template-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.rally-point-template-card header > span { white-space: nowrap; font-weight: 700; }
.rally-point-template-card header small, .rally-point-template-meta { color: #cbbfa9; }
.rally-point-template-meta { margin: 0; font-size: .9rem; }
.rally-point-template-form-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.rally-point-template-units, .rally-point-template-actions, .rally-point-template-shortcuts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.rally-point-template-units span { background: rgba(213,183,124,.12); border-radius: .35rem; padding: .25rem .45rem; }
.rally-point-template-actions form { display: inline-flex; margin: 0; }
.rally-point-share-form { display: grid; grid-template-columns: minmax(12rem,1fr) auto auto; gap: .5rem; align-items: end; }
.rally-point-checkbox { display: flex !important; grid-template-columns: auto 1fr; align-items: center; white-space: nowrap; padding-bottom: .55rem; }
.rally-point-table { width: 100%; min-width: 44rem; }
.rally-point-section { min-width: 0; overflow-x: auto; }
@media (max-width: 880px) {
    .rally-point-command-grid, .rally-point-aggregate-grid { grid-template-columns: 1fr; }
    .rally-point-target-search, .rally-point-template-form, .rally-point-share-form { grid-template-columns: 1fr; }
    .rally-point-target-search > *, .rally-point-template-form > *, .rally-point-share-form > * { grid-column: 1; }
    .rally-point-target-result, .rally-point-template-card header { flex-direction: column; gap: .2rem; }
}

/* Paket 10: Plünderung und Massenplünderung */
.plunder-category-grid,
.plunder-order-list,
.mass-plunder-villages { display: grid; gap: .75rem; }
.plunder-category-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.plunder-category-card,
.plunder-order-card,
.mass-plunder-village { border: 1px solid var(--border-color, #6d5a3c); border-radius: .55rem; padding: .75rem; min-width: 0; }
.plunder-category-card > header,
.plunder-order-card > header,
.mass-plunder-village > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.plunder-category-card.is-locked { opacity: .82; }
.plunder-form,
.mass-plunder-form { display: grid; gap: .85rem; }
.plunder-form-controls,
.mass-plunder-toolbar,
.mass-plunder-actions,
.plunder-selection-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; }
.plunder-form-controls > label,
.mass-plunder-toolbar > label { display: grid; gap: .25rem; min-width: 12rem; flex: 1 1 12rem; }
.plunder-preview,
.mass-plunder-summary { border-left: .25rem solid currentColor; padding: .55rem .75rem; }
.plunder-preview p,
.mass-plunder-summary p { margin: .15rem 0; }
.mass-plunder-village[hidden] { display: none; }
.mass-plunder-village-status { margin-bottom: 0; }
@media (max-width: 720px) {
    .plunder-category-grid { grid-template-columns: 1fr; }
    .mass-plunder-village > header { align-items: flex-start; flex-direction: column; }
}
.plunder-order-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .45rem .75rem;
    margin: .65rem 0 0;
}
.plunder-order-details > div {
    min-width: 0;
    border-top: 1px solid rgba(213,183,124,.2);
    padding-top: .4rem;
}
.plunder-order-details dt { color: #cbbfa9; font-size: .78rem; }
.plunder-order-details dd { margin: .18rem 0 0; overflow-wrap: anywhere; }
.plunder-order-details dd span { display: inline-block; margin-right: .45rem; }
.plunder-group-items { display: grid; gap: .45rem; margin-top: .7rem; }
.plunder-group-item { border: 1px solid rgba(213,183,124,.22); border-radius: .4rem; padding: .55rem .65rem; }
.plunder-group-item > header { display: flex; justify-content: space-between; gap: .65rem; }
.plunder-group-item p { margin: .35rem 0 0; }


/* Routed building-detail pages (Performance-Paket 03). */
.classic-map-building-link {
    display: block;
    position: relative;
    text-decoration: none;
}

.village-table-action-secondary,
.village-center-building-link {
    text-decoration: none;
}

.village-building-page {
    min-height: 0;
}

.village-building-breadcrumb {
    margin: 0 0 12px;
}

.village-building-back-link,
.village-building-close-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.village-building-detail {
    overflow: hidden;
    border: 1px solid var(--ci-border, #6f5a3c);
    border-radius: 8px;
    background: var(--ci-surface, #f3e4c3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.village-building-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ci-border, #6f5a3c);
}

.village-building-detail-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.village-building-detail-heading h1 {
    margin: 0;
}

.village-building-detail-icon {
    font-size: 42px;
    line-height: 1;
}

.village-building-level,
.village-building-description {
    margin: 4px 0 0;
}

.village-building-description {
    padding: 14px 18px 0;
}

.village-building-detail-body {
    padding: 16px 18px 20px;
}

@media (max-width: 720px) {
    .village-building-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Routed building-detail design system (Layout-Paket 04). */
.village-building-page {
    width: min(1320px, calc(100% - 32px));
}

.village-building-detail {
    --building-detail-border: #756044;
    --building-detail-border-strong: #b58b36;
    --building-detail-surface: rgba(31, 25, 20, 0.98);
    --building-detail-surface-raised: rgba(52, 42, 32, 0.94);
    --building-detail-surface-muted: rgba(18, 14, 11, 0.58);
    --building-detail-text: #e7dcc7;
    --building-detail-muted: #bfb29d;
    --building-detail-accent: #f2d36c;
    --building-detail-positive: #a9d77d;
    --building-detail-warning: #f0ad67;
    overflow: visible;
    border: 1px solid var(--building-detail-border-strong);
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(42, 35, 28, 0.98), var(--building-detail-surface));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.38), 0 8px 22px rgba(0, 0, 0, 0.46);
    color: var(--building-detail-text);
}

.village-building-detail-header {
    min-height: 64px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--building-detail-border-strong);
    background: linear-gradient(to bottom, #2f2821, #1b1510);
}

.village-building-detail-heading {
    gap: 10px;
}

.village-building-detail-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 211, 108, 0.56);
    border-radius: 4px;
    background: radial-gradient(circle at 50% 30%, rgba(242, 211, 108, 0.14), transparent 58%), #17120e;
    font-size: 25px;
}

.village-building-detail-title {
    min-width: 0;
}

.village-building-detail-kicker {
    display: block;
    margin-bottom: 1px;
    color: #aa9b84;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.village-building-detail-heading h1 {
    overflow: hidden;
    color: var(--building-detail-accent);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.village-building-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.village-building-detail-meta > span {
    margin: 0;
    padding: 2px 6px;
    border: 1px solid rgba(139, 115, 85, 0.62);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    color: #cbbfa9;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.village-building-detail-meta > span:first-child {
    border-color: rgba(242, 211, 108, 0.52);
    color: #fff0b3;
}

.village-building-detail-meta > span.is-warning {
    border-color: rgba(240, 173, 103, 0.68);
    color: #ffc27f;
}

.village-building-close-link {
    min-height: 32px;
    padding: 6px 10px;
    flex: 0 0 auto;
    border: 1px solid #8b7355;
    border-radius: 3px;
    background: linear-gradient(to bottom, #342b22, #1d1712);
    color: #ead58d;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.village-building-close-link:hover,
.village-building-close-link:focus-visible {
    border-color: #d4af37;
    color: #fff0b3;
}

.village-building-description {
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(117, 96, 68, 0.65);
    background: rgba(0, 0, 0, 0.14);
    color: var(--building-detail-muted);
    font-size: 12px;
    line-height: 1.45;
}

.village-building-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    gap: 10px;
    align-items: start;
    padding: 10px;
}

.village-building-detail-body--management {
    grid-template-columns: minmax(0, 1fr);
}

.building-detail-main,
.building-detail-aside {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.building-detail-aside {
    position: sticky;
    top: 72px;
}

.building-detail-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--building-detail-border);
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--building-detail-surface-raised), rgba(29, 23, 18, 0.97));
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.24);
}

.building-detail-section > .building-modal-section,
.building-detail-section > .village-center-management {
    margin: 0;
    padding: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.building-detail-section > .building-modal-section > h4,
.building-detail-section > .building-modal-section > h5,
.building-detail-section > .village-center-management > .village-center-management-header h4 {
    margin: -9px -9px 8px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(181, 139, 54, 0.64);
    background: linear-gradient(to bottom, rgba(51, 43, 34, 0.96), rgba(27, 21, 16, 0.98));
    color: var(--building-detail-accent);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.building-detail-section > .building-modal-section > h5 {
    margin-top: 8px;
}

.building-detail-section > .building-modal-section > p,
.building-detail-section > .building-modal-section > div > p,
.building-detail-section .building-modal-section p {
    margin: 0 0 7px;
    color: var(--building-detail-muted);
    font-size: 11px;
    line-height: 1.42;
}

.building-detail-section > .building-modal-section > p:last-child,
.building-detail-section .building-modal-section p:last-child {
    margin-bottom: 0;
}

.village-building-detail .building-modal-stats {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 5px;
    margin: 0 0 8px;
}

.village-building-detail .building-modal-stats > div {
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(117, 96, 68, 0.74);
    border-radius: 3px;
    background: var(--building-detail-surface-muted);
}

.village-building-detail .building-modal-stats span {
    color: #aa9b84;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .04em;
}

.village-building-detail .building-modal-stats strong {
    margin-top: 2px;
    color: #f3dc8a;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.village-building-detail .building-modal-benefits {
    gap: 5px;
}

.village-building-detail .building-modal-benefits > :is(div, article) {
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(117, 96, 68, 0.65);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
}

.village-building-detail .building-modal-benefits > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
}

.village-building-detail .building-modal-benefits > article > strong {
    color: #f0d77a;
    font-size: 12px;
}

.village-building-detail .building-modal-benefits > article > span {
    color: #e2d4bc;
    font-size: 11px;
    text-align: right;
}

.village-building-detail .building-modal-benefits > article > small {
    grid-column: 1 / -1;
    color: #aa9d86;
    font-size: 10px;
    line-height: 1.35;
}

.village-building-detail .building-modal-benefits div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
}

.village-building-detail .building-modal-benefits span,
.village-building-detail .building-modal-benefits strong,
.village-building-detail .building-modal-benefits em {
    font-size: 10px;
}

.village-building-detail .building-modal-production-list {
    gap: 5px;
}

.village-building-detail .building-modal-production-list > div {
    padding: 6px 7px;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    gap: 2px 7px;
}

.village-building-detail .building-modal-production-list :is(strong, span) {
    font-size: 11px;
}

.village-building-detail .building-modal-production-list small {
    font-size: 10px;
}

.village-building-detail .resource-cost-list {
    gap: 4px;
}

.village-building-detail .resource-cost-list > span,
.village-building-detail .resource-cost-item {
    min-height: 0;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.25;
}

.village-building-detail .building-modal-actions,
.village-building-detail .building-production-form {
    margin: 7px 0 0;
    padding: 0;
}

.village-building-detail .building-modal-actions button,
.village-building-detail .building-production-form button {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
}

.building-detail-section--building-upgrade > .building-modal-upgrade {
    display: grid;
    gap: 8px;
}

.building-detail-section--building-upgrade .building-modal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

.building-detail-section--building-upgrade .building-modal-section {
    margin: 0;
    padding: 7px 0 0;
    border: 0;
    border-top: 1px solid rgba(117, 96, 68, 0.6);
    border-radius: 0;
    background: transparent;
}

.building-detail-section--building-upgrade .building-modal-section h4 {
    margin: 0 0 5px;
    color: #c8ad63;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .07em;
}

.building-detail-section--building-upgrade .building-modal-actions,
.building-detail-section--building-upgrade .building-production-form {
    margin-top: 0;
}

.village-building-detail .notice,
.village-building-detail .success,
.village-building-detail .error,
.village-building-detail .unit-training-lock,
.village-building-detail .building-modal-notice {
    margin: 6px 0;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.4;
}

.village-building-detail .building-modal-notice {
    border: 1px solid rgba(117, 96, 68, 0.72);
    background: rgba(0, 0, 0, 0.2);
    color: var(--building-detail-muted);
}

.village-building-detail .building-modal-notice > strong {
    color: var(--building-detail-accent);
    font-size: 11px;
}

.village-building-detail .unit-production-queue,
.village-building-detail .unit-retirement-section {
    display: grid;
    gap: 6px;
    margin: 7px 0;
}

.village-building-detail .unit-production-order-list {
    display: grid;
    gap: 5px;
}

.village-building-detail .classic-unit-training-task {
    padding: 7px;
    border: 1px solid rgba(117, 96, 68, 0.7);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
}

.village-building-detail .classic-unit-training-task > p {
    margin: 4px 0;
    font-size: 10px;
}

.village-building-detail .unit-training-queue-heading,
.village-building-detail .unit-training-queue-footer {
    gap: 6px;
}

.village-building-detail .unit-training-queue-heading {
    font-size: 11px;
}

.village-building-detail .unit-training-queue-heading small,
.village-building-detail .classic-unit-training-task small {
    font-size: 9px;
}

.village-building-detail .unit-training-queue-controls {
    gap: 3px;
}

.village-building-detail .unit-training-queue-controls button {
    min-width: 28px;
    min-height: 28px;
    padding: 2px 5px;
}

.village-building-detail .classic-build-queue-progress {
    min-height: 17px;
    margin: 5px 0;
}

.village-building-detail .unit-training-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 6px;
}

.village-building-detail .unit-training-card {
    padding: 8px;
    border-radius: 3px;
}

.village-building-detail .unit-training-card header {
    gap: 7px;
    margin-bottom: 5px;
}

.village-building-detail .unit-training-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: 18px;
}

.village-building-detail .unit-training-card header strong {
    font-size: 13px;
}

.village-building-detail .unit-training-card header small,
.village-building-detail .unit-training-card > p {
    font-size: 10px;
}

.village-building-detail .unit-training-card > p {
    margin-bottom: 6px;
}

.village-building-detail .unit-training-stats,
.village-building-detail .unit-training-costs {
    gap: 3px 5px;
    margin-bottom: 6px;
}

.village-building-detail .unit-training-stats > span,
.village-building-detail .unit-training-costs > span {
    padding: 4px 5px;
    font-size: 9px;
}

.village-building-detail .unit-training-form {
    grid-template-columns: minmax(70px, .65fr) auto minmax(100px, 1fr);
    gap: 5px;
}

.village-building-detail .unit-training-form label {
    gap: 2px;
    font-size: 9px;
}

.village-building-detail .unit-training-form input[type="number"],
.village-building-detail .unit-training-form input[type="text"] {
    min-height: 32px;
    padding: 5px 6px;
}

.village-building-detail .unit-training-form button {
    grid-column: auto;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 10px;
}

.village-building-detail .noble-coin-mint-form {
    grid-template-columns: minmax(130px, .8fr) minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
    padding: 7px;
}

.village-building-detail .noble-coin-mint-form > :is(.noble-coin-mint-total, .noble-coin-mint-summary, .unit-training-lock, button[type="submit"]) {
    grid-column: 1 / -1;
}

.village-building-detail .rally-point-workspace {
    gap: 7px;
}

.village-building-detail .rally-point-tabs {
    gap: 4px;
    padding-bottom: 5px;
}

.village-building-detail .rally-point-tabs button {
    min-height: 31px;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 10px;
}

.village-building-detail .rally-point-panel {
    gap: 7px;
}

.village-building-detail .rally-point-command-grid,
.village-building-detail .rally-point-aggregate-grid {
    gap: 6px;
}

.village-building-detail .rally-point-section,
.village-building-detail .rally-point-aggregate-card,
.village-building-detail .rally-point-template-card {
    border-radius: 3px;
}

.village-building-detail .rally-point-target-search,
.village-building-detail .rally-point-template-form,
.village-building-detail .rally-point-share-form {
    gap: 5px;
}

.village-building-detail .rally-point-unit-selection {
    gap: 5px;
}

.village-building-detail .rally-point-unit-selection label {
    padding: 5px;
}

.village-building-detail .rally-point-template-card,
.village-building-detail .rally-point-aggregate-card {
    padding: 6px;
}

.building-detail-section--management {
    overflow: visible;
}

.building-detail-section--management > .village-center-management {
    padding: 0;
}

.village-building-detail .village-center-management-header {
    padding: 9px 10px;
}

.village-building-detail .village-center-management-header h4 {
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
}

.village-building-detail .village-center-management-header p {
    font-size: 10px;
}

.village-building-detail .village-center-tabs {
    gap: 4px;
    padding: 6px 8px;
}

.village-building-detail .village-center-tabs button {
    min-height: 31px;
    padding: 5px 8px;
    font-size: 10px;
}

.village-building-detail .village-center-tab-panels {
    padding: 8px;
}

.village-building-detail .village-center-section-heading {
    margin-bottom: 6px;
}

.village-building-detail .village-center-section-heading h4 {
    font-size: 12px;
}

.village-building-detail .village-center-section-heading p,
.village-building-detail .village-center-table {
    font-size: 10px;
}

.village-building-detail .village-center-table th,
.village-building-detail .village-center-table td {
    padding: 5px 6px;
}

@media (max-width: 1040px) {
    .village-building-detail-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .building-detail-aside {
        position: static;
        grid-row: 1;
    }

    .building-detail-section--building-upgrade > .building-modal-upgrade {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
        align-items: start;
    }

    .building-detail-section--building-upgrade > .building-modal-upgrade > .building-modal-stats,
    .building-detail-section--building-upgrade > .building-modal-upgrade > .building-modal-section,
    .building-detail-section--building-upgrade > .building-modal-upgrade > form {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .village-building-page {
        width: calc(100% - 20px);
    }

    .village-building-detail-header {
        align-items: stretch;
        gap: 8px;
    }

    .village-building-close-link {
        align-self: flex-start;
    }

    .village-building-detail-body {
        padding: 7px;
    }

    .building-detail-main,
    .building-detail-aside {
        gap: 7px;
    }

    .building-detail-section--building-upgrade > .building-modal-upgrade {
        grid-template-columns: minmax(0, 1fr);
    }

    .village-building-detail .rally-point-command-grid,
    .village-building-detail .rally-point-aggregate-grid,
    .village-building-detail .rally-point-target-search,
    .village-building-detail .rally-point-template-form,
    .village-building-detail .rally-point-share-form,
    .village-building-detail .noble-coin-mint-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .village-building-detail .rally-point-target-results,
    .village-building-detail .rally-point-selected-target,
    .village-building-detail .rally-point-template-description,
    .village-building-detail .rally-point-template-form .rally-point-unit-selection,
    .village-building-detail .rally-point-template-form-actions,
    .village-building-detail .noble-coin-mint-form > * {
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .village-building-detail-heading {
        align-items: flex-start;
    }

    .village-building-detail-heading h1 {
        white-space: normal;
    }

    .village-building-detail-meta > span {
        border-radius: 3px;
    }

    .village-building-detail .building-modal-stats,
    .building-detail-section--building-upgrade .building-modal-stats,
    .village-building-detail .unit-training-stats,
    .village-building-detail .unit-training-costs,
    .village-building-detail .unit-training-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .village-building-detail .unit-training-form button {
        width: 100%;
    }
}

.village-building-detail .development-start-form {
    grid-template-columns: minmax(0, 1fr);
}

.village-building-detail .development-start-form button {
    width: 100%;
}

.village-building-detail[data-building-layout-profile="standard"] {
    max-width: 1080px;
    margin-inline: auto;
}

.village-building-detail[data-building-layout-profile="workspace"] .village-building-detail-body {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
}

@media (max-width: 1040px) {
    .village-building-detail[data-building-layout-profile="workspace"] .village-building-detail-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Paket 17: eine gemeinsame Gebäudemanagement-Tabelle für Dorfzentrum und Tabellenansicht. */
.building-management-table-section--overview .building-management-table-frame {
    border: 0;
    border-radius: 0;
}

.building-management-table-section--overview .building-management-table thead th {
    top: 0;
}

.building-management-table-section--overview .building-management-table-title {
    margin: 0;
    color: #ffd700;
    font-size: 14px;
}

.building-management-table-section--center .building-management-table-title {
    margin: 0;
    font-size: .76rem;
}

.building-management-table-section .building-management-table-title + p {
    margin-top: 2px;
}

/* Zeitlich begrenzter, serverautoritativ geprüfter Truppenrückruf. */
.troop-movement-recall {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--danger, #b43a3a) 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #b43a3a) 8%, transparent);
}

.troop-movement-recall form {
    margin: 0;
}

.troop-movement-recall small {
    line-height: 1.45;
}

.troop-movement-recall-expired {
    font-weight: 700;
    opacity: .75;
}

/* Einheitliche Präsentation aktiver Truppenbewegungen in Dorf, Dashboard und Versammlungsplatz. */
.troop-movement-compact-list {
    display: grid;
    gap: 10px;
}

.troop-movement-compact-card {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(213, 183, 124, .3);
    border-radius: 9px;
    background: rgba(24, 21, 18, .58);
}

.troop-movement-compact-card.is-danger {
    border-color: color-mix(in srgb, var(--danger, #b43a3a) 55%, rgba(213, 183, 124, .3));
}

.troop-movement-compact-heading,
.troop-movement-compact-heading > div,
.troop-movement-compact-route,
.rally-point-movement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.troop-movement-compact-heading > div {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.troop-movement-compact-heading > strong,
.troop-movement-compact-heading small,
.troop-movement-compact-card > small {
    font-size: .78rem;
}

.troop-movement-compact-route {
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
}

.troop-movement-compact-route a {
    color: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.troop-movement-compact-route--full {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.troop-movement-compact-route--full a:last-child {
    text-align: right;
}

.troop-movement-compact-progress {
    position: relative;
    min-height: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
}

.troop-movement-compact-progress > span {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 2px;
    background: linear-gradient(90deg, rgba(169, 125, 54, .78), rgba(226, 190, 106, .82));
}

.troop-movement-compact-progress > em {
    position: relative;
    z-index: 1;
    display: block;
    padding: 3px 9px;
    text-align: center;
    font-size: .76rem;
    font-style: normal;
    font-weight: 700;
}

.troop-movement-compact-stationed {
    margin: 0;
    font-weight: 700;
}

.troop-movement-compact-card--sidebar {
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
    padding: 10px 8px;
    background: transparent;
}

.troop-movement-compact-card--dashboard {
    grid-template-columns: minmax(0, 1fr);
}

.troop-movement-compact-card--dashboard .troop-movement-recall,
.troop-movement-compact-card--sidebar .troop-movement-recall {
    margin-top: 2px;
    padding: 8px;
}

.troop-movement-compact-card--dashboard .troop-movement-recall form,
.troop-movement-compact-card--sidebar .troop-movement-recall form {
    display: flex;
}

.troop-movement-compact-card--dashboard .troop-movement-recall button,
.troop-movement-compact-card--sidebar .troop-movement-recall button {
    width: 100%;
    padding: 8px 10px;
}

.troop-movement-recall-feedback {
    margin: 0;
    font-weight: 700;
}

.rally-point-tabs button > span {
    display: inline-flex;
    min-width: 1.4rem;
    justify-content: center;
    margin-left: .3rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .72rem;
}

.rally-point-movement-header {
    align-items: flex-start;
    margin-bottom: 12px;
}

.rally-point-movement-header h4,
.rally-point-movement-header p {
    margin-top: 0;
}

@media (max-width: 680px) {
    .troop-movement-compact-route--full {
        grid-template-columns: minmax(0, 1fr);
    }

    .troop-movement-compact-route--full a:last-child {
        text-align: left;
    }

    .troop-movement-compact-route--full > span {
        transform: rotate(90deg);
        justify-self: start;
    }

    .rally-point-movement-header {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Serverautoritative Truppenbewegungs-Bestätigungsseite */
.troop-movement-confirmation-page { max-width:1180px; margin:0 auto; padding-bottom:5rem; }
.troop-movement-confirmation-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.troop-movement-confirmation-heading small { color:#a9854f; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.troop-movement-confirmation-heading h1 { margin:.15rem 0 0; }
.troop-movement-confirmation-message { margin:.55rem 0 .8rem; padding:.65rem .8rem; border-left:3px solid #b08b4e; background:rgba(255,255,255,.035); }
.troop-movement-confirmation-message p { margin:.25rem 0 0; }
.troop-movement-confirmation-message.is-ready { border-color:#4d9b63; color:#d7f1dd; background:rgba(41,112,66,.18); }
.troop-movement-confirmation-message.is-error { border-color:#b74444; color:#ffd0d0; background:rgba(145,36,36,.22); }
.troop-movement-confirmation-route { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid rgba(176,139,78,.24); border-bottom:1px solid rgba(176,139,78,.24); }
.troop-movement-confirmation-route > div { min-width:0; display:flex; gap:.45rem; align-items:baseline; }
.troop-movement-confirmation-route > div:last-child { justify-content:flex-end; text-align:right; }
.troop-movement-confirmation-route span { color:#bda981; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }
.troop-movement-confirmation-route strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.troop-movement-confirmation-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem 1rem; margin:0; padding:.7rem 0; border-bottom:1px solid rgba(176,139,78,.24); }
.troop-movement-confirmation-summary > div { min-width:0; }
.troop-movement-confirmation-summary .is-wide { grid-column:span 2; }
.troop-movement-confirmation-summary dt,.troop-movement-confirmation-facts dt { color:#bda981; font-size:.67rem; line-height:1.2; text-transform:uppercase; letter-spacing:.04em; }
.troop-movement-confirmation-summary dd,.troop-movement-confirmation-facts dd { margin:.08rem 0 0; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.troop-movement-confirmation-list { display:block; }
.troop-movement-confirmation-row { padding:.75rem 0; border-bottom:1px solid rgba(176,139,78,.24); }
.troop-movement-confirmation-row > header { display:flex; align-items:baseline; gap:.75rem; }
.troop-movement-confirmation-row > header > div { display:flex; align-items:baseline; gap:.45rem; }
.troop-movement-confirmation-row > header small { color:#c9ad7e; }
.troop-movement-confirmation-row > header > span { margin-left:auto; font-weight:700; white-space:nowrap; }
.troop-movement-confirmation-row > header > a { font-size:.76rem; }
.troop-movement-confirmation-units { display:flex; flex-wrap:wrap; gap:.2rem .85rem; margin:.35rem 0 .55rem; color:#e6d4b4; font-size:.8rem; }
.troop-movement-confirmation-units span { white-space:nowrap; }
.troop-movement-confirmation-facts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem .9rem; margin:0; }
.troop-movement-confirmation-row > p { margin:.5rem 0 0; color:#bfb19a; font-size:.76rem; }
.troop-movement-confirmation-warnings { margin:.8rem 0; padding:.65rem .8rem .65rem 1.8rem; background:rgba(153,98,24,.18); color:#ffdca2; }
.troop-movement-confirmation-actions { position:sticky; bottom:0; z-index:4; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.55rem; margin-top:1rem; padding:.75rem 0; border-top:1px solid rgba(176,139,78,.35); background:linear-gradient(to bottom,rgba(23,19,15,.94),#17130f 24%); backdrop-filter:blur(5px); }
.troop-movement-planning-feedback { margin:.55rem 0 0; color:#d7f1dd; font-size:.8rem; }
.troop-movement-planning-feedback.is-error { color:#ffb3b3; }
@media (max-width:900px) {
  .troop-movement-confirmation-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .troop-movement-confirmation-summary .is-wide { grid-column:span 3; }
  .troop-movement-confirmation-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .troop-movement-confirmation-heading { flex-direction:column; }
  .troop-movement-confirmation-route { grid-template-columns:1fr; gap:.2rem; }
  .troop-movement-confirmation-route > div:last-child { justify-content:flex-start; text-align:left; }
  .troop-movement-confirmation-route > span { display:none; }
  .troop-movement-confirmation-summary,.troop-movement-confirmation-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .troop-movement-confirmation-summary .is-wide { grid-column:span 2; }
  .troop-movement-confirmation-row > header { flex-wrap:wrap; }
  .troop-movement-confirmation-row > header > span { margin-left:0; }
  .troop-movement-confirmation-actions .btn { flex:1 1 100%; text-align:center; }
}

/* Vollständiger Markt-Workspace im Gebäudedetail */
.market-workspace {
    display: grid;
    gap: 1rem;
    min-width: 0;
}
.building-market-workspace > .market-workspace {
    margin: 0;
}
.village-building-detail[data-building-layout-profile="workspace"] [data-building-detail-section="market"] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.trade-offer-card--editable {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}
.trade-offer-edit-form {
    display: grid;
    gap: .7rem;
    min-width: 0;
}
.trade-offer-edit-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(6rem, .55fr) minmax(8rem, 1fr) minmax(6rem, .55fr);
    gap: .6rem;
}
.trade-offer-edit-grid label {
    display: grid;
    gap: .3rem;
    min-width: 0;
}
.trade-offer-edit-grid select,
.trade-offer-edit-grid input {
    width: 100%;
    min-width: 0;
}
.trade-offer-card--editable > .trade-offer-action {
    align-self: end;
}
@media (max-width: 980px) {
    .trade-offer-edit-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 620px) {
    .trade-offer-card--editable,
    .trade-offer-edit-grid {
        grid-template-columns: 1fr;
    }
}

.trade-offer-edit-unavailable {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: baseline;
    gap: .35rem .55rem;
    min-width: 0;
}
.trade-offer-edit-unavailable small {
    grid-column: 1 / -1;
    color: var(--muted, #b7aa94);
}
@media (max-width: 620px) {
    .trade-offer-edit-unavailable { grid-template-columns: 1fr; }
    .trade-offer-edit-unavailable small { grid-column: auto; }
}

/* Markt: autoritative Händlerkapazität und Annahmebereitschaft */
.market-offer-estimate {
    margin-top: .75rem;
}
.market-capacity-warning {
    margin: .65rem 0 0;
    padding: .55rem .7rem;
    border: 1px solid rgba(196, 113, 79, .45);
    border-radius: .45rem;
    background: rgba(120, 48, 35, .16);
    color: #e8b7a2;
    font-size: .88rem;
}
[data-market-capacity-feedback] {
    display: block;
    margin-top: .55rem;
}

/* Markt Paket 4: 1:1-Rohstoffkörbe, Teilannahmen und atomare Massenangebote */
.trade-offer-batch-form,
.trade-offer-accept-form,
.trade-offer-edit-form {
    display: grid;
    gap: .9rem;
}
.trade-offer-entry {
    display: grid;
    gap: .8rem;
    min-width: 0;
    margin: 0;
    padding: .9rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: .7rem;
    background: rgba(0,0,0,.12);
}
.trade-offer-entry > legend {
    padding: 0 .35rem;
    font-weight: 700;
}
.trade-basket-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    min-width: 0;
}
.trade-basket-grid > section {
    display: grid;
    align-content: start;
    gap: .55rem;
    min-width: 0;
}
.trade-basket-grid h4 {
    margin: 0;
}
.trade-basket-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .55fr);
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.trade-basket-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.trade-basket-line input {
    width: 100%;
    min-width: 0;
}
.trade-basket-estimate,
.trade-offer-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .8rem;
}
.trade-offer-batch-actions {
    justify-content: space-between;
}
.trade-offer-exchange--basket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
}
.trade-offer-exchange--basket > div {
    display: grid;
    gap: .2rem;
}
.trade-offer-exchange--basket > div:last-child {
    text-align: right;
}
.trade-offer-progress {
    height: .38rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}
.trade-offer-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    opacity: .65;
}
@media (max-width: 700px) {
    .trade-basket-grid,
    .trade-offer-exchange--basket {
        grid-template-columns: 1fr;
    }
    .trade-offer-exchange--basket > div:last-child {
        text-align: left;
    }
    .trade-basket-line {
        grid-template-columns: 1fr;
        gap: .3rem;
    }
    .trade-offer-batch-actions > .btn,
    .trade-offer-batch-actions > button {
        width: 100%;
    }
}

/* Projektweite, policygebundene Entitätssuche */
.entity-search {
    position: relative;
    min-width: 0;
}
.entity-search > label,
.entity-search > label > span {
    display: block;
}
.entity-search > label > span {
    margin-bottom: .4rem;
    font-weight: 700;
}
.entity-search input[type="search"] {
    width: 100%;
}
.entity-search-results {
    position: absolute;
    z-index: 80;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: min(28rem, 55vh);
    overflow-y: auto;
    padding: .4rem;
    border: 1px solid rgba(214, 177, 84, .45);
    border-radius: .55rem;
    background: rgba(24, 20, 15, .985);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45);
}
.entity-search-results[hidden] {
    display: none;
}
.entity-search-heading {
    padding: .45rem .55rem .25rem;
    color: var(--muted-text, #cbbf9f);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.entity-search-result,
.entity-search-more,
.entity-search-player-toolbar button {
    width: 100%;
    border: 0;
    border-radius: .42rem;
    background: transparent;
    color: inherit;
    text-align: left;
}
.entity-search-result {
    display: grid;
    gap: .12rem;
    padding: .62rem .7rem;
    cursor: pointer;
}
.entity-search-result:hover,
.entity-search-result:focus-visible,
.entity-search-result[aria-selected="true"] {
    outline: none;
    background: rgba(214, 177, 84, .16);
}
.entity-search-result.is-own strong::after {
    content: " · Eigenes Dorf";
    color: var(--success-color, #8fd39a);
    font-size: .78em;
    font-weight: 700;
}
.entity-search-result strong,
.entity-search-result span {
    overflow-wrap: anywhere;
}
.entity-search-result span {
    color: var(--muted-text, #cbbf9f);
    font-size: .84rem;
}
.entity-search-message {
    margin: 0;
    padding: .75rem;
    color: var(--muted-text, #cbbf9f);
}
.entity-search-player-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .4rem .55rem;
}
.entity-search-player-toolbar button {
    width: auto;
    padding: .4rem .55rem;
    cursor: pointer;
}
.entity-search-player-toolbar strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
.entity-search-more {
    margin-top: .35rem;
    padding: .7rem;
    color: var(--accent, #f2d36c);
    cursor: pointer;
    text-align: center;
}
.entity-search-more:hover,
.entity-search-more:focus-visible {
    background: rgba(214, 177, 84, .12);
    outline: none;
}
.entity-search-selection-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .55rem;
}
.entity-search-selection-row p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}
.entity-search-selection-row [hidden] {
    display: none;
}
.canvas-map-entity-search .entity-search-results {
    position: static;
    margin-top: .45rem;
    max-height: 26rem;
}
@media (max-width: 640px) {
    .entity-search-selection-row {
        align-items: stretch;
        flex-direction: column;
    }
    .entity-search-selection-row button {
        width: 100%;
    }
}