/* =====================================================
   VIKINGSWARS
   ZENTRALE STYLE.CSS

   Enthält:
   - Login
   - Registrierung
   - Spieloberfläche
   - Navigation
   - Rohstoffleiste
   - Stadtübersicht
   - Bauwarteschlange
   - Produktion
   - allgemeine Spielseiten
   - Karten
   - Listen
   - Tabellen
   - Buttons
   - Formulare
   - Statusanzeigen
   - leere Seiten
   - responsive Darstellung
   ===================================================== */


/* =====================================================
   1. GRUNDLAGEN
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: #e8dfca;

    background:
        radial-gradient(
            circle at center,
            rgba(74, 61, 43, 0.35) 0%,
            rgba(20, 22, 22, 0.85) 55%,
            #080a0a 100%
        ),
        linear-gradient(
            135deg,
            #1b211f 0%,
            #0c1111 50%,
            #15100c 100%
        );

    background-attachment: fixed;
}

/* ==========================================================
   NEULINGS-TUTORIAL
   ========================================================== */
.tutorial-navigation-button { border-color: #8d743d; }
.tutorial-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 9px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
#game-content-window:has(#tutorial-page.active-page) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
#tutorial-page.active-page {
    height: 100%;
    min-height: 0;
}
.tutorial-scroll-content {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 0;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.tutorial-scroll-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tutorial-header { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.tutorial-header h2 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.tutorial-header .content-kicker { margin-bottom: 2px; font-size: .61rem; line-height: 1.2; }
.tutorial-header > strong { color: #d6bd78; font-size: .9rem; }
.tutorial-message { min-height: 1.1em; margin: 0; color: #bfe1ad; font-size: .78rem; line-height: 1.25; }
.tutorial-message.is-error { color: #f0a29a; }
.tutorial-bubbles { position: fixed; z-index: 900; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 7px; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.tutorial-bubble { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid #a77e3d; border-radius: 12px 12px 3px 12px; background: rgba(30,24,16,.96); color: #ead8ad; box-shadow: 0 6px 22px rgba(0,0,0,.48); font: inherit; font-size: .79rem; line-height: 1.3; text-align: left; animation: tutorial-bubble-in .18s ease-out; }
.tutorial-bubble > span { flex: 1; }
.tutorial-bubble-close { pointer-events: auto; flex: none; padding: 0 3px; border: 0; background: none; color: inherit; font: inherit; font-size: 1rem; cursor: pointer; }
@keyframes tutorial-bubble-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.tutorial-chapters { display: grid; gap: 7px; }
.tutorial-chapter { border: 1px solid #665538; border-radius: 6px; background: rgba(20,17,12,.86); overflow: hidden; }
.tutorial-chapter > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; color: #e7d7aa; font-size: .86rem; line-height: 1.2; font-weight: 700; }
.tutorial-chapter[disabled] > summary { cursor: default; color: #817b70; }
.tutorial-locked { margin: 0; padding: 0 10px 9px; color: #817b70; font-size: .76rem; line-height: 1.25; }
.tutorial-task-list { display: grid; gap: 4px; padding: 0 7px 7px; }
.tutorial-task { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #4d4940; border-radius: 4px; background: rgba(75,73,68,.26); }
.tutorial-task.is-ready { border-color: #477a43; background: rgba(44,102,44,.28); }
.tutorial-task.is-claimed { border-color: #465943; background: rgba(35,58,34,.24); opacity: .82; }
.tutorial-task h3 { margin: 0 0 2px; font-size: .84rem; line-height: 1.2; }
.tutorial-task p { margin: 0 0 2px; color: #c6c0b1; font-size: .76rem; line-height: 1.25; }
.tutorial-task small { color: #a9a18f; font-size: .7rem; line-height: 1.2; }
.tutorial-claim { max-width: 215px; padding: 5px 7px; border: 1px solid #75a66d; border-radius: 4px; background: #315f32; color: #f2f4e9; font-size: .75rem; line-height: 1.2; cursor: pointer; }
.tutorial-claim:disabled { opacity: .6; cursor: wait; }
.tutorial-open-label { color: #99958d; font-size: .75rem; }
.tutorial-claimed-label { color: #8fbd86; font-size: .75rem; }
.tutorial-chapter-reward, .tutorial-finale { padding: 7px 10px; border-top: 1px solid #57482f; color: #cbbd9b; font-size: .77rem; line-height: 1.25; }
.tutorial-chapter-reward.is-ready, .tutorial-finale.is-ready { background: rgba(44,102,44,.22); }
.tutorial-finale { border: 1px solid #806a3c; border-radius: 6px; background: rgba(25,20,13,.9); }
.tutorial-finale h2 { margin: 0 0 4px; font-size: .98rem; line-height: 1.2; }
.tutorial-finale p { margin: 0; }
@media (max-width: 760px) {
    .tutorial-shell { height: 72dvh; }
    .tutorial-header { align-items: flex-start; }
    .tutorial-task { grid-template-columns: 1fr; gap: 5px; }
    .tutorial-claim { max-width: none; width: 100%; }
}

body.public-auth-body {
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: #080a0a;
    background-image: url("/images/login/Titelbild.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.server-selection-shell{width:min(900px,calc(100% - 2rem));margin:auto;padding:4rem 0}.server-selection-panel{padding:1.5rem;border:1px solid rgba(196,151,74,.7);background:rgba(14,18,20,.9)}.server-selection-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.server-selection-card{padding:1rem;border:1px solid rgba(196,151,74,.45);background:rgba(0,0,0,.25)}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    font-size: inherit;
}

[hidden] {
    display: none !important;
}


/* =====================================================
   2. STARTSEITE
   ===================================================== */

body:not(.game-body) > header {
    text-align: center;

    padding:
        70px 20px
        35px 20px;
}

body:not(.game-body) > header h1 {
    margin: 0;

    color: #c8a76a;

    font-size: clamp(
        3rem,
        8vw,
        6.5rem
    );

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-shadow:
        0 3px 0 #3b2a16,
        0 6px 14px rgba(0, 0, 0, 0.9);
}

body:not(.game-body) > header p {
    margin-top: 12px;

    color: #bcb29e;

    font-size: 1.1rem;

    letter-spacing: 0.08em;

    text-shadow:
        0 2px 4px #000;
}

body:not(.game-body) > main {
    width: min(
        92%,
        520px
    );

    margin:
        20px auto
        60px auto;
}


/* =====================================================
   3. LOGIN
   ===================================================== */

#login-area {
    position: relative;

    padding:
        34px 36px
        38px 36px;

    border:
        2px solid #725c38;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(52, 43, 32, 0.96),
            rgba(20, 19, 17, 0.98)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.75),
        inset 0 0 35px rgba(0, 0, 0, 0.65);
}

#login-area::before {
    content: "";

    display: block;

    width: 70%;
    height: 1px;

    margin:
        0 auto
        25px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b39258,
            transparent
        );
}

#login-area h2 {
    margin:
        0 0
        28px 0;

    text-align: center;

    color: #d2b274;

    font-size: 1.8rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

#login-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

#login-form label {
    margin-top: 7px;

    color: #bfb39e;

    font-size: 0.95rem;

    letter-spacing: 0.05em;
}

#login-form input {
    width: 100%;

    padding:
        13px 14px;

    border:
        1px solid #665437;

    border-radius: 4px;

    outline: none;

    color: #eee5d2;

    background:
        rgba(8, 10, 10, 0.82);

    font-size: 1rem;

    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, 0.75);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

#login-form input:focus {
    border-color: #bd985a;

    box-shadow:
        0 0 0 2px rgba(189, 152, 90, 0.15),
        inset 0 2px 7px rgba(0, 0, 0, 0.75);
}

#login-form button {
    margin-top: 22px;

    padding:
        14px 20px;

    border:
        1px solid #c29b5d;

    border-radius: 4px;

    cursor: pointer;

    color: #f0e4cc;

    background:
        linear-gradient(
            #74542d,
            #3f2c18
        );

    font-weight: bold;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.12);

    transition:
        transform 0.15s,
        filter 0.15s;
}

#login-form button:hover {
    filter: brightness(1.18);
}

#login-form button:active {
    transform: translateY(2px);
}


/* =====================================================
   4. REGISTRIERUNGSBEREICH AUF LOGINSEITE
   ===================================================== */

#register-area {
    margin-top: 22px;

    padding:
        24px 25px;

    text-align: center;

    border:
        1px solid #4d4538;

    border-radius: 6px;

    background:
        rgba(12, 14, 14, 0.82);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.45);
}

#register-area h2 {
    margin:
        0 0
        10px 0;

    color: #c5a86f;

    font-size: 1.35rem;
}

#register-area p {
    margin:
        0 0
        20px 0;

    color: #9e978b;

    line-height: 1.5;
}

#register-area a {
    display: inline-block;

    padding:
        12px 20px;

    border:
        1px solid #776343;

    border-radius: 4px;

    color: #d8c49c;

    text-decoration: none;

    letter-spacing: 0.05em;

    background:
        linear-gradient(
            #353431,
            #1d1e1d
        );

    transition:
        filter 0.2s,
        border-color 0.2s;
}

#register-area a:hover {
    filter: brightness(1.2);

    border-color: #b9975d;
}


/* =====================================================
   5. REGISTRIERUNGSSEITE
   ===================================================== */

#register-form-area {
    position: relative;

    padding:
        34px 36px
        38px 36px;

    border:
        2px solid #725c38;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(52, 43, 32, 0.96),
            rgba(20, 19, 17, 0.98)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.75),
        inset 0 0 35px rgba(0, 0, 0, 0.65);
}

#register-form-area::before {
    content: "";

    display: block;

    width: 70%;
    height: 1px;

    margin:
        0 auto
        25px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b39258,
            transparent
        );
}

#register-form-area h2 {
    margin:
        0 0
        12px 0;

    text-align: center;

    color: #d2b274;

    font-size: 1.8rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.form-description {
    margin:
        0 0
        25px 0;

    text-align: center;

    color: #9e978b;

    line-height: 1.5;
}

#register-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

#register-form label {
    margin-top: 7px;

    color: #bfb39e;

    font-size: 0.95rem;

    letter-spacing: 0.05em;
}

#register-form input {
    width: 100%;

    padding:
        13px 14px;

    border:
        1px solid #665437;

    border-radius: 4px;

    outline: none;

    color: #eee5d2;

    background:
        rgba(8, 10, 10, 0.82);

    font-size: 1rem;

    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, 0.75);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

#register-form input:focus {
    border-color: #bd985a;

    box-shadow:
        0 0 0 2px rgba(189, 152, 90, 0.15),
        inset 0 2px 7px rgba(0, 0, 0, 0.75);
}

#register-form button {
    margin-top: 18px;

    padding:
        14px 20px;

    border:
        1px solid #c29b5d;

    border-radius: 4px;

    cursor: pointer;

    color: #f0e4cc;

    background:
        linear-gradient(
            #74542d,
            #3f2c18
        );

    font-weight: bold;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.12);

    transition:
        transform 0.15s,
        filter 0.15s;
}

#register-form button:hover {
    filter: brightness(1.18);
}

#register-form button:active {
    transform: translateY(2px);
}


/* =====================================================
   6. LOGIN / REGISTRIERUNG MELDUNGEN
   ===================================================== */

#register-message,
#login-message {
    min-height: 22px;

    margin:
        8px 0
        0 0;

    text-align: center;

    color: #d4bc8b;

    font-size: 0.95rem;

    line-height: 1.4;
}

.back-to-login {
    margin-top: 25px;

    padding-top: 20px;

    text-align: center;

    border-top:
        1px solid #4d4538;
}

.back-to-login a {
    color: #bda674;

    text-decoration: none;
}

.back-to-login a:hover {
    color: #e0c78d;

    text-decoration: underline;
}

body:not(.game-body) > footer {
    padding:
        10px 20px
        35px 20px;

    text-align: center;

    color: #6e695f;

    font-size: 0.85rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/* =====================================================
   7. SPIELOBERFLÄCHE - GRUNDSEITE
   ===================================================== */

body.game-body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;

    display: flex;
    flex-direction: column;

    background-color: #11120f;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    color: #e8dfcf;

    overflow: hidden;
}

/* Marktplatz */
.market-content { display: grid; gap: 18px; }
.market-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(0,0,0,.16); }
.market-toolbar label { display: grid; gap: 5px; }
.market-toolbar strong { margin-left: auto; color: #d7bd87; }
.market-panel { padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(0,0,0,.13); }
.market-create-form { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)) auto; gap: 10px; align-items: end; }
.market-create-form label { display: grid; gap: 5px; }
.market-create-form small { grid-column: 1/-1; color: rgba(255,255,255,.68); }
.market-card-list { display: grid; gap: 10px; }
.market-card { display: grid; gap: 5px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.market-card h4,.market-card p { margin: 0; }
.market-card p { opacity: .78; }
.market-card small { opacity: .65; }
.market-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.market-card-actions input { width: 150px; }
#market-message.is-error { color: #ffaaa2; }
@media (max-width: 1000px) { .market-create-form { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .market-create-form { grid-template-columns: 1fr; } .market-create-form small { grid-column: auto; } .market-toolbar strong { width: 100%; margin-left: 0; } }

body.game-body[data-midgard-time="dawn"] { background-image: url("/images/backgrounds/midgard-dawn.png"); }
body.game-body[data-midgard-time="day"] { background-image: url("/images/backgrounds/midgard-day.png"); }
body.game-body[data-midgard-time="sunset"] { background-image: url("/images/backgrounds/midgard-sunset.png"); }
body.game-body[data-midgard-time="night"] { background-image: url("/images/backgrounds/midgard-night.png"); }


/* =====================================================
   8. SPIELKOPF
   ===================================================== */

.game-header {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 20px;

    padding:
        8px 18px;

    background: linear-gradient(180deg, rgba(20, 21, 18, 0.78), rgba(9, 10, 8, 0.68));

    border-bottom:
        1px solid #78613d;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.6);

    position: sticky;
    top: 0;

    z-index: 100;
}

.game-logo {
    flex: 0 0 auto;

    font-size: 1.4rem;

    font-weight: bold;

    letter-spacing: 0.1em;

    color: #c9a56b;

    text-shadow:
        0 2px 4px #000;
}


/* =====================================================
   9. ROHSTOFFLEISTE
   ===================================================== */

.resource-bar {
    flex: 1;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(92px, 1fr));

    gap: 6px;
}

.resource-item {
    min-width: 0;

    padding:
        5px 8px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(70, 62, 48, 0.75),
            rgba(28, 27, 23, 0.9)
        );

    border:
        1px solid rgba(151, 124, 79, 0.55);

    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.resource-name {
    display: block;

    margin-bottom: 2px;

    color: #a99b84;

    font-size: 0.66rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.resource-value-line {
    display: flex;

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

    gap: 4px;

    white-space: nowrap;
}

.resource-item strong {
    display: inline;

    color: #f0e4cd;

    font-size: 0.88rem;
}

.resource-storage-separator {
    color: #766c5d;

    font-size: 0.78rem;
}

.resource-storage-value {
    color: #a99f8e;

    font-size: 0.78rem;
}

.resource-gold strong {
    display: block;

    color: #d5b468;

    font-size: 0.88rem;
}


/* =====================================================
   10. DREITEILIGER SPIELRAHMEN
   ===================================================== */

.game-layout {
    width: 100%;

    flex: 1;
    min-height: 0;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        165px minmax(0, 1fr) 190px;

    align-items: stretch;

    background: transparent;
}


/* =====================================================
   11. LINKE NAVIGATION
   ===================================================== */

.game-navigation {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-bottom: max(12px, env(safe-area-inset-bottom));

    padding:
        12px 9px;

    background: linear-gradient(90deg, rgba(10, 12, 10, 0.7), rgba(24, 23, 18, 0.52));

    border-right:
        1px solid #57482f;
}
.game-logo img { display: block; width: clamp(92px, 9vw, 142px); max-height: 48px; object-fit: contain; }

.game-navigation::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.navigation-title,
.city-sidebar-title {
    margin-bottom: 9px;

    padding-bottom: 7px;

    color: #c9a56b;

    font-size: 0.72rem;

    font-weight: bold;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    border-bottom:
        1px solid rgba(151, 124, 79, 0.45);
}

.navigation-button {
    width: 100%;

    display: block;

    margin:
        0 0
        3px 0;

    padding:
        7px 9px;

    border:
        1px solid transparent;

    border-radius: 3px;

    background:
        transparent;

    color: #cfc5b3;

    font-size: 0.82rem;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.navigation-button:hover {
    background:
        rgba(117, 92, 55, 0.25);

    border-color:
        rgba(151, 124, 79, 0.35);

    color: #ffffff;
}

.navigation-button.active {
    background:
        linear-gradient(
            90deg,
            rgba(128, 96, 53, 0.65),
            rgba(73, 57, 36, 0.4)
        );

    border-color: #876d45;

    color: #f3e4c7;
}


/* =====================================================
   12. MITTLERER SPIELBEREICH
   ===================================================== */

main.game-content {
    width: 100%;
    max-width: none;


    min-width: 0;
    min-height: 0;


    margin: 0;
    padding: 14px;


    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;

    background: transparent;
}
main.game-content::-webkit-scrollbar {
    display: none;
}


#game-content-window {
    width: 100%;
    max-width: none;

    min-height: 100%;

    margin: 0;

    padding: 15px;

    background: linear-gradient(180deg, rgba(29, 29, 24, 0.22), rgba(13, 14, 12, 0.16));

    border:
        1px solid #665438;

    border-radius: 5px;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.38);
}

.content-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 14px;

    margin-bottom: 14px;

    padding-bottom: 9px;

    border-bottom:
        1px solid rgba(151, 124, 79, 0.4);
}

.content-kicker {
    margin:
        0 0
        3px 0;

    color: #9c896a;

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}

.content-heading h1 {
    margin: 0;

    color: #e3c790;

    font-size: clamp(
        1.35rem,
        2.4vw,
        1.9rem
    );
}

#city-position {
    margin:
        3px 0
        0 0;

    color: #aaa08e;

    font-size: 0.8rem;
}


/* =====================================================
   13. SEITENWECHSEL
   ===================================================== */

.game-page {
    display: none;

    width: 100%;
}

.game-page.active-page {
    display: block;
}

.game-page > h2 {
    margin:
        0 0
        8px 0;

    color: #d6bd8c;

    font-size: 1.25rem;
}

.game-page > p {
    color: #a9a091;

    line-height: 1.45;
}


/* =====================================================
   14. UNIVERSELLER SEITENKOPF
   ===================================================== */

.game-page-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 16px;

    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom:
        1px solid rgba(151, 124, 79, 0.35);
}

.game-page-title {
    margin: 0;

    color: #d6bd8c;

    font-size: 1.3rem;
}

.game-page-description {
    margin:
        4px 0
        0 0;

    color: #9f9789;

    font-size: 0.82rem;

    line-height: 1.45;
}

.game-page-actions {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


/* =====================================================
   15. UNIVERSELLE SPIELBEREICHE
   ===================================================== */

.game-section {
    width: 100%;

    margin-top: 14px;
}

.game-section:first-child {
    margin-top: 0;
}

.game-section-title {
    margin:
        0 0
        8px 0;

    color: #cbb17e;

    font-size: 1rem;

    font-weight: normal;
}

.game-section-description {
    margin:
        -2px 0
        10px 0;

    color: #91897c;

    font-size: 0.76rem;

    line-height: 1.45;
}


/* =====================================================
   16. UNIVERSELLE PANELS
   ===================================================== */

.game-panel {
    width: 100%;

    padding: 12px;

    background:
        rgba(10, 11, 9, 0.42);

    border:
        1px solid rgba(128, 104, 66, 0.42);

    border-radius: 4px;
}

.game-panel-compact {
    padding: 8px;
}

.game-panel-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 9px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(128, 104, 66, 0.3);
}

.game-panel-title {
    margin: 0;

    color: #d1b982;

    font-size: 0.92rem;
}

.game-panel-body {
    width: 100%;
}


/* =====================================================
   17. UNIVERSELLE GRIDS
   ===================================================== */

.game-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 10px;
}

.game-grid-two {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.game-grid-three {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.game-grid-four {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


/* =====================================================
   18. UNIVERSELLE KARTEN
   ===================================================== */

.game-card {
    min-width: 0;

    padding: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(42, 39, 32, 0.76),
            rgba(18, 18, 15, 0.82)
        );

    border:
        1px solid rgba(128, 104, 66, 0.5);

    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.game-card:hover {
    border-color:
        rgba(177, 140, 82, 0.72);
}

.game-card-title {
    margin:
        0 0
        5px 0;

    color: #dec99e;

    font-size: 0.92rem;
}

.game-card-subtitle {
    margin:
        0 0
        8px 0;

    color: #8f877a;

    font-size: 0.7rem;
}

.game-card-text {
    margin: 0;

    color: #aaa192;

    font-size: 0.78rem;

    line-height: 1.45;
}

.game-card-footer {
    margin-top: 10px;

    padding-top: 8px;

    border-top:
        1px solid rgba(128, 104, 66, 0.24);
}


/* =====================================================
   19. UNIVERSELLE LISTEN
   ===================================================== */

.game-list {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.game-list-entry {
    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    min-height: 36px;

    padding:
        6px 8px;

    background:
        rgba(10, 11, 9, 0.34);

    border:
        1px solid rgba(128, 104, 66, 0.3);

    border-radius: 3px;
}

.game-list-entry-main {
    min-width: 0;
}

.game-list-entry-title {
    display: block;

    color: #d6c39e;

    font-size: 0.8rem;
}

.game-list-entry-description {
    display: block;

    margin-top: 2px;

    color: #827b70;

    font-size: 0.66rem;
}

.game-list-entry-value {
    color: #d2b97f;

    font-size: 0.78rem;

    white-space: nowrap;
}


/* =====================================================
   20. UNIVERSELLE TABELLEN
   ===================================================== */

.game-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.game-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.78rem;
}

.game-table th {
    padding:
        7px 8px;

    text-align: left;

    color: #bba67e;

    background:
        rgba(71, 57, 37, 0.4);

    border-bottom:
        1px solid rgba(151, 124, 79, 0.45);

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.game-table td {
    padding:
        7px 8px;

    color: #c8bead;

    border-bottom:
        1px solid rgba(128, 104, 66, 0.2);
}

.game-table tbody tr:hover {
    background:
        rgba(117, 92, 55, 0.12);
}

.game-table-number {
    text-align: right !important;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   21. UNIVERSELLE BUTTONS
   ===================================================== */

.game-button {
    display: inline-flex;

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

    min-height: 30px;

    padding:
        6px 11px;

    border:
        1px solid #846b43;

    border-radius: 3px;

    cursor: pointer;

    color: #eadabd;

    background:
        linear-gradient(
            #665034,
            #3d3020
        );

    font-size: 0.76rem;

    font-weight: bold;

    text-decoration: none;

    transition:
        filter 0.15s,
        transform 0.15s,
        border-color 0.15s;
}

.game-button:hover:not(:disabled) {
    filter: brightness(1.15);

    border-color: #ae8b55;
}

.game-button:active:not(:disabled) {
    transform: translateY(1px);
}

.game-button:disabled,
.game-button.disabled {
    cursor: not-allowed;

    opacity: 0.42;

    filter: grayscale(0.5);
}

.game-button-secondary {
    background:
        linear-gradient(
            #353532,
            #222320
        );

    border-color: #5f594d;

    color: #c9c0b0;
}

.game-button-danger {
    background:
        linear-gradient(
            #6a3c31,
            #3b241f
        );

    border-color: #75493c;

    color: #e2c3b8;
}

.game-button-small {
    min-height: 25px;

    padding:
        4px 8px;

    font-size: 0.68rem;
}


/* =====================================================
   22. FORMULARE INNERHALB DES SPIELS
   ===================================================== */

.game-form {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.game-form-row {
    display: grid;

    grid-template-columns:
        minmax(120px, 0.45fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;
}

.game-form label {
    color: #aaa08e;

    font-size: 0.74rem;
}

.game-input,
.game-select,
.game-textarea {
    width: 100%;

    padding:
        7px 9px;

    outline: none;

    border:
        1px solid #5d503b;

    border-radius: 3px;

    color: #e2d8c6;

    background:
        rgba(8, 10, 9, 0.78);

    font-size: 0.78rem;

    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.game-input:focus,
.game-select:focus,
.game-textarea:focus {
    border-color: #9f7d4b;

    box-shadow:
        0 0 0 2px rgba(159, 125, 75, 0.12);
}

.game-textarea {
    min-height: 90px;

    resize: vertical;
}


/* =====================================================
   23. STATUS / HINWEISE / WARNUNGEN
   ===================================================== */

.game-status {
    display: inline-flex;

    align-items: center;

    padding:
        3px 6px;

    border:
        1px solid rgba(128, 104, 66, 0.42);

    border-radius: 3px;

    color: #bdb19e;

    background:
        rgba(10, 11, 9, 0.4);

    font-size: 0.65rem;
}

.game-status-active {
    color: #d8c58e;

    border-color:
        rgba(177, 140, 82, 0.6);
}

.game-status-success {
    color: #aebd95;

    border-color:
        rgba(111, 134, 88, 0.55);
}

.game-status-warning {
    color: #d2b477;

    border-color:
        rgba(166, 126, 61, 0.6);
}

.game-status-danger {
    color: #c89585;

    border-color:
        rgba(132, 72, 59, 0.65);
}

.game-notice {
    width: 100%;

    padding:
        9px 11px;

    border-left:
        3px solid #846b43;

    background:
        rgba(52, 44, 31, 0.38);

    color: #bcb09d;

    font-size: 0.75rem;

    line-height: 1.45;
}

.game-warning {
    border-left-color: #a6793e;
}

.game-error {
    border-left-color: #8d4b3e;
}


/* =====================================================
   24. ROHSTOFFKOSTEN
   ===================================================== */

.game-costs {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}

.game-cost {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        3px 6px;

    background:
        rgba(10, 11, 9, 0.38);

    border:
        1px solid rgba(128, 104, 66, 0.28);

    border-radius: 3px;

    color: #b9ad99;

    font-size: 0.66rem;
}

.game-cost-value {
    color: #dfcca3;

    font-weight: bold;
}

.game-cost-insufficient {
    color: #c98e7d;
}


/* =====================================================
   25. TIMER
   ===================================================== */

.game-timer {
    color: #d0b779;

    font-size: 0.78rem;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


/* =====================================================
   26. FORTSCHRITTSBALKEN
   ===================================================== */

.game-progress {
    width: 100%;
    height: 7px;

    overflow: hidden;

    background:
        rgba(6, 7, 6, 0.8);

    border:
        1px solid rgba(128, 104, 66, 0.35);

    border-radius: 10px;
}

.game-progress-bar {
    height: 100%;

    width: 0;

    background:
        linear-gradient(
            90deg,
            #6f5532,
            #ad8950
        );

    transition:
        width 0.25s linear;
}


/* =====================================================
   27. LEERE / NOCH NICHT FERTIGE SEITEN
   ===================================================== */

.future-page-content,
.game-empty-state {
    width: 100%;

    min-height: 180px;

    margin-top: 14px;

    display: flex;

    flex-direction: column;

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

    padding: 18px;

    text-align: center;

    color: #91897d;

    background:
        radial-gradient(
            circle at center,
            rgba(55, 51, 41, 0.24),
            rgba(10, 11, 9, 0.28)
        );

    border:
        1px solid rgba(128, 104, 66, 0.3);

    border-radius: 4px;
}

.game-empty-state h3 {
    margin:
        0 0
        6px 0;

    color: #c1ad84;

    font-size: 0.95rem;
}

.game-empty-state p {
    max-width: 520px;

    margin: 0;

    color: #91897d;

    font-size: 0.76rem;

    line-height: 1.45;
}


/* =====================================================
   28. STADTÜBERSICHT
   ===================================================== */

#overview-page > p {
    margin:
        5px 0
        12px 0;

    font-size: 0.9rem;
}

.city-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin:
        12px 0
        14px 0;
}

.overview-card {
    min-width: 0;

    padding:
        10px 12px;

    text-align: center;

    background:
        rgba(10, 11, 9, 0.5);

    border:
        1px solid rgba(128, 104, 66, 0.55);

    border-radius: 4px;
}

.overview-card h3 {
    margin:
        0 0
        5px 0;

    color: #9f927e;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.overview-card strong {
    color: #e8d6b4;

    font-size: 1rem;
}


/* =====================================================
   29. BAUAUFTRÄGE + PRODUKTION
   ===================================================== */

.overview-status-grid {
    display: grid;

    grid-template-columns:
        minmax(360px, 1.45fr)
        minmax(210px, 0.75fr);

    gap: 28px;

    align-items: start;

    margin-top: 12px;
}

.construction-overview,
.production-overview {
    min-width: 0;
}

.construction-overview > h2,
.production-overview > h2 {
    margin:
        0 0
        8px 0;

    color: #cbb17e;

    font-size: 1rem;

    font-weight: normal;

    letter-spacing: 0.03em;
}


/* =====================================================
   30. BAUWARTESCHLANGE
   ===================================================== */

.construction-queue {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.construction-entry {
    min-height: 38px;

    display: grid;

    grid-template-columns:
        25px minmax(0, 1fr) auto;

    align-items: center;

    gap: 8px;

    padding:
        5px 8px;

    background:
        rgba(10, 11, 9, 0.42);

    border:
        1px solid rgba(128, 104, 66, 0.38);

    border-radius: 3px;
}

.construction-entry-active {
    border-color:
        rgba(177, 140, 82, 0.7);

    background:
        rgba(71, 55, 34, 0.38);
}

.construction-entry-waiting {
    opacity: 0.88;
}

.construction-number {
    display: flex;

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

    width: 22px;
    height: 22px;

    border:
        1px solid rgba(151, 124, 79, 0.45);

    border-radius: 50%;

    color: #bca77f;

    font-size: 0.68rem;
}

.construction-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 1px;
}

.construction-info strong {
    overflow: hidden;

    color: #ddcba8;

    font-size: 0.8rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.construction-info span {
    color: #817a6e;

    font-size: 0.65rem;
}

.construction-time {
    color: #d0b779;

    font-size: 0.78rem;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


/* =====================================================
   31. PRODUKTION PRO STUNDE
   ===================================================== */

.production-overview-list {
    width: 100%;

    border-top:
        1px solid rgba(128, 104, 66, 0.35);

    border-bottom:
        1px solid rgba(128, 104, 66, 0.35);
}

.production-overview-row {
    display: grid;

    grid-template-columns:
        minmax(70px, 1fr)
        auto;

    align-items: center;

    gap: 14px;

    min-height: 36px;

    padding:
        5px 3px;

    border-bottom:
        1px solid rgba(128, 104, 66, 0.18);
}

.production-overview-row:last-child {
    border-bottom: 0;
}

.production-resource-name {
    color: #a99f8e;

    font-size: 0.78rem;
}

.production-overview-row strong {
    color: #d7c395;

    font-size: 0.82rem;

    font-weight: normal;

    text-align: right;

    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   32. STADTANSICHT
   ===================================================== */

.city-scene-placeholder {
    min-height: 235px;

    margin-top: 16px;

    display: flex;

    flex-direction: column;

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

    padding: 22px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(74, 74, 60, 0.38),
            rgba(13, 14, 12, 0.82)
        );

    border:
        1px solid rgba(120, 99, 65, 0.5);

    border-radius: 5px;
}

.city-scene-placeholder h2 {
    margin:
        0 0
        8px 0;

    color: #cbb17e;

    font-size: 1.15rem;
}

.city-scene-placeholder p {
    max-width: 600px;

    margin:
        4px 0;

    color: #a9a091;

    font-size: 0.82rem;

    line-height: 1.45;
}


/* =====================================================
   33. GEBÄUDESEITE
   ===================================================== */

.buildings-page-heading {
    margin-bottom: 14px;
}

.buildings-page-heading h2 {
    margin:
        0 0
        5px 0;

    color: #d6bd8c;

    font-size: 1.25rem;
}

.buildings-page-heading p:last-child {
    margin:
        5px 0
        0 0;

    color: #a9a091;

    font-size: 0.85rem;
}


/* =====================================================
   34. RECHTE STÄDTELEISTE
   ===================================================== */

.city-sidebar {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    padding:
        12px 9px;

    background: linear-gradient(270deg, rgba(10, 12, 10, 0.7), rgba(24, 23, 18, 0.52));

    border-left:
        1px solid #57482f;
}

.city-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#city-list {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding-right: 2px;
}


/* =====================================================
   ZENTRALE TRUPPENBEWEGUNGEN
   ===================================================== */

.movement-overview {
    width: 100%;
    position: sticky;
    top: 61px;
    z-index: 95;
    background: rgba(13, 15, 12, 0.72);
    border-bottom: 1px solid #57482f;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
}

.movement-overview-toggle {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 18px;
    color: #bdb19e;
    background: linear-gradient(180deg, #1b1a16, #11120f);
    border: 0;
    cursor: pointer;
    text-align: left;
}

.movement-overview-toggle:hover,
.movement-overview-toggle:focus-visible {
    color: #ead9ba;
    background: linear-gradient(180deg, #252219, #151510);
    outline: none;
}

.movement-overview-title {
    color: #d2ae71;
    font-weight: bold;
}

#movement-overview-summary { flex: 1; }

.premium-display-bonus {
    color: #72c878;
    font-weight: 700;
}

.movement-overview-arrow {
    color: #b99760;
    transition: transform 120ms ease;
}

.movement-overview-toggle[aria-expanded="true"] .movement-overview-arrow {
    transform: rotate(180deg);
}

.movement-overview-panel {
    max-height: min(55vh, 520px);
    overflow-y: auto;
    padding: 8px 18px 10px;
    background: rgba(13, 14, 12, 0.98);
    border-top: 1px solid rgba(120, 97, 61, 0.45);
}

#movement-overview-list {
    display: grid;
    gap: 6px;
}

.movement-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 8px 10px;
    background: linear-gradient(145deg, rgba(48, 43, 34, 0.86), rgba(23, 23, 19, 0.94));
    border: 1px solid rgba(135, 109, 68, 0.5);
    border-radius: 3px;
}

.movement-overview-primary {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: minmax(100px, 0.7fr) minmax(160px, 1.4fr) minmax(160px, 1.4fr) minmax(80px, 0.6fr);
    gap: 10px;
}

.movement-overview-primary p,
.movement-detail-columns p {
    min-width: 0;
    margin: 0;
}

.movement-overview-primary p span,
.movement-detail-columns p span {
    display: block;
    color: #817767;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.movement-overview-primary p strong,
.movement-detail-columns p strong {
    display: block;
    overflow-wrap: anywhere;
    color: #d8ccb8;
    font-size: 0.77rem;
}

.movement-overview-timing {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.movement-live-countdown {
    color: #d7b36f;
    font-variant-numeric: tabular-nums;
}

.movement-overview-timing span {
    margin-top: 2px;
    color: #8f8678;
    font-size: 0.68rem;
}

.movement-overview-details {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(117, 96, 61, 0.35);
    padding-top: 5px;
}

.movement-overview-details summary {
    width: fit-content;
    color: #b99a68;
    cursor: pointer;
    font-size: 0.74rem;
}

.movement-detail-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 7px 4px 2px;
    color: #b9ad9a;
    font-size: 0.74rem;
}

.movement-detail-columns h4 { margin: 0 0 4px; color: #c9a66c; font-size: 0.76rem; }
.movement-detail-columns ul { margin: 0; padding-left: 16px; }
.movement-recall-button { margin-top: 8px; }
.movement-expedition-options {
    margin: 8px 0;
    padding: 8px;
    background: rgba(19, 19, 16, 0.75);
    border: 1px solid rgba(151, 124, 79, 0.45);
}
.movement-expedition-options p { margin: 4px 0; }
.movement-expedition-options select { margin-left: 8px; }
.movement-overview-empty { margin: 3px 0; color: #8c8375; text-align: center; }

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

@media (max-width: 760px) {
    .movement-overview { position: relative; top: auto; }
    .movement-overview-toggle { padding: 6px 10px; flex-wrap: wrap; }
    .movement-overview-panel { padding: 7px; }
    .movement-overview-row { grid-template-columns: 1fr; }
    .movement-overview-primary { grid-template-columns: 1fr; }
    .movement-overview-timing { min-width: 0; align-items: flex-start; }
    .movement-overview-details { grid-column: 1; }
    .movement-detail-columns { grid-template-columns: 1fr; }
}

.city-list-entry {
    width: 100%;

    display: block;

    padding: 4px;

    background:
        rgba(39, 36, 29, 0.75);

    border:
        1px solid rgba(121, 98, 62, 0.55);

    border-radius: 4px;

    color: #d8cbb5;
}

.city-list-entry:hover,
.city-list-entry:focus-within {
    border-color: #a38250;

    background:
        rgba(70, 56, 37, 0.72);
}

.city-list-entry.active-city {
    border-color: #b18c52;

    box-shadow:
        inset 3px 0 0 #b18c52;
}

.city-select-button {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    padding: 4px;

    border: 0;

    color: inherit;

    background: transparent;

    text-align: left;

    cursor: pointer;
}

.city-list-name {
    color: #e4d1ac;

    font-size: 0.85rem;

    font-weight: bold;
}

.city-list-position {
    color: #9e9587;

    font-size: 0.7rem;
}

.capital-marker {
    margin-top: 2px;

    color: #b79862;

    font-size: 0.6rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.city-rename-form {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 4px;
}

.city-rename-input {
    width: 100%;

    padding: 5px 6px;

    border:
        1px solid #6f5a3b;

    border-radius: 3px;

    outline: none;

    color: #eadfc9;

    background:
        rgba(8, 10, 9, 0.82);

    font-size: 0.76rem;
}

.city-rename-input:focus {
    border-color: #b18c52;
}

.city-rename-actions {
    display: flex;

    gap: 4px;
}

.city-rename-save,
.city-rename-cancel {
    flex: 1;

    padding: 4px;

    border:
        1px solid #6f5a3b;

    border-radius: 3px;

    color: #d8cbb5;

    background:
        rgba(63, 49, 31, 0.82);

    font-size: 0.62rem;

    cursor: pointer;
}

.city-rename-cancel {
    border-color: #554d41;

    background:
        rgba(33, 33, 29, 0.82);
}

.city-rename-save:disabled,
.city-rename-cancel:disabled {
    cursor: wait;

    opacity: 0.55;
}

.city-rename-error,
.city-list-empty {
    margin: 0;

    color: #c89585;

    font-size: 0.62rem;

    line-height: 1.35;
}

.player-sidebar-info {
    margin-top: 14px;

    padding:
        9px 7px;

    border-top:
        1px solid rgba(151, 124, 79, 0.35);

    border-bottom:
        1px solid rgba(151, 124, 79, 0.35);
}

.player-sidebar-info span {
    display: block;

    margin-bottom: 3px;

    color: #8e8577;

    font-size: 0.65rem;

    text-transform: uppercase;
}

.player-sidebar-info strong {
    color: #d7c6a5;

    font-size: 0.82rem;
}


/* =====================================================
   35. LOGOUT
   ===================================================== */

.logout-button {
    width: 100%;

    margin-top: 11px;

    padding: 7px;

    background:
        rgba(69, 43, 34, 0.7);

    border:
        1px solid #704f3d;

    border-radius: 3px;

    color: #d8c7b6;

    font-size: 0.78rem;

    cursor: pointer;
}

.logout-button:hover {
    background:
        rgba(92, 54, 40, 0.85);
}


/* =====================================================
   36. SPIELMELDUNGEN
   ===================================================== */

#game-message {
    min-height: 16px;

    margin:
        12px 0
        0 0;

    color: #9e9587;

    font-size: 0.72rem;
}


/* =====================================================
   37. UNTERE STADTLEISTE
   ===================================================== */

.midgard-timeline {
    width: 100%;
    height: 58px;
    flex: 0 0 58px;
    position: relative;
    overflow: hidden;
    background: rgba(7, 10, 12, 0.9);
    border-top: 1px solid #745c36;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.55);
    z-index: 90;
}

#buildings-page,
#barracks-page,
#workshop-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#buildings-page[hidden],
#barracks-page[hidden],
#workshop-page[hidden] { display: none; }

.building-selection-detail,
.building-queue-panel {
    border: 1px solid rgba(128, 101, 58, 0.72);
    background: linear-gradient(135deg, rgba(18, 20, 17, 0.9), rgba(35, 30, 21, 0.78));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
}

.building-loading,
.building-empty-note { margin: 0; color: #aaa08d; font-size: 0.8rem; }
.building-selection-detail > .building-loading { padding: 24px; }

.building-focus {
    display: grid;
    grid-template-columns: minmax(150px, 24%) 1fr;
    min-height: 250px;
}

.building-focus-empty { grid-template-columns: 1fr minmax(220px, 35%); padding-left: 24px; align-items: center; }
.building-focus-empty h2,
.building-focus-title h2 { margin: 2px 0 7px; color: #dcc28d; font-size: 1.3rem; }
.building-focus-empty p:last-child { margin: 0; color: #b1a794; }

.building-focus-image,
.building-focus-atmosphere,
.building-tile-image {
    overflow: hidden;
    background: linear-gradient(145deg, rgba(93, 76, 47, 0.35), rgba(12, 15, 13, 0.85));
}
.building-focus-image { position: relative; isolation: isolate; }
.building-focus-image::before,
.building-focus-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}
.building-focus-image::after {
    background: linear-gradient(90deg, rgba(5, 7, 6, 0.18), transparent 42%, rgba(245, 201, 121, 0.08));
}
.building-focus-image.atmosphere-smoke::before,
.building-focus-image.atmosphere-mist::before,
.building-focus-image.atmosphere-dust::before {
    inset: 42% -18% -28%;
    background: radial-gradient(ellipse at 48% 76%, rgba(210, 207, 190, 0.18), transparent 62%);
    animation: building-mist-drift 14s ease-in-out infinite alternate;
}
.building-focus-image.atmosphere-dust::before { background: radial-gradient(ellipse at 52% 78%, rgba(207, 178, 126, 0.17), transparent 60%); }
.building-focus-image.atmosphere-fire::before {
    inset: 38% 8% 0;
    background: radial-gradient(circle at 52% 82%, rgba(240, 119, 35, 0.2), transparent 48%);
    animation: building-fire-glow 5s ease-in-out infinite alternate;
}
.building-focus-image.atmosphere-breeze::before {
    inset: -20% -45%;
    background: linear-gradient(112deg, transparent 38%, rgba(241, 225, 171, 0.13) 48%, transparent 58%);
    animation: building-light-breeze 16s ease-in-out infinite;
}
.building-focus-image.atmosphere-runes::before {
    background: radial-gradient(circle at 50% 62%, rgba(105, 113, 255, 0.24), transparent 44%);
    animation: building-rune-pulse 7s ease-in-out infinite alternate;
}
.building-focus-image.atmosphere-ambient::before {
    background: radial-gradient(circle at 64% 68%, rgba(226, 168, 84, 0.12), transparent 45%);
    animation: building-fire-glow 9s ease-in-out infinite alternate;
}
@keyframes building-mist-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); opacity: .55; } to { transform: translate3d(4%, -2%, 0) scale(1.08); opacity: .95; } }
@keyframes building-fire-glow { from { opacity: .42; transform: scale(.98); } to { opacity: 1; transform: scale(1.04); } }
@keyframes building-light-breeze { 0%, 22% { transform: translateX(-18%); opacity: 0; } 50% { opacity: .75; } 78%, 100% { transform: translateX(18%); opacity: 0; } }
@keyframes building-rune-pulse { from { opacity: .42; } to { opacity: .92; } }
.building-focus-image img,
.building-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.building-focus-image.is-placeholder,
.building-focus-atmosphere,
.building-tile-image.is-placeholder { display: grid; place-items: center; color: rgba(202, 177, 126, 0.6); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.62rem; }
.building-focus-atmosphere { align-self: stretch; min-height: 180px; border-left: 1px solid rgba(128, 101, 58, 0.48); }

.building-focus-body { min-width: 0; padding: 16px 18px; }
.building-focus-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.building-focus-name-row { display: flex; align-items: center; gap: 7px; }
.building-function-help { position: relative; flex: 0 0 auto; }
.building-function-info {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #80683f;
    border-radius: 50%;
    color: #d7bd86;
    background: #29251d;
    font: 700 0.72rem/1 serif;
    cursor: pointer;
}
.building-function-info:hover,
.building-function-info:focus-visible,
.building-function-info[aria-expanded="true"] { border-color: #c49b58; color: #f0d7a4; outline: none; }
.building-function-tooltip {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    visibility: hidden;
    width: min(310px, calc(100vw - 40px));
    padding: 9px 28px 9px 10px;
    border: 1px solid #80683f;
    border-radius: 3px;
    color: #d7cbb4;
    background: #171713;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
}
.building-function-help.is-open .building-function-tooltip,
.building-function-help:focus-within .building-function-tooltip { visibility: visible; opacity: 1; pointer-events: auto; }
@media (hover: hover) {
    .building-function-help:hover .building-function-tooltip { visibility: visible; opacity: 1; pointer-events: auto; }
}
.building-function-close {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    color: #b9a887;
    background: transparent;
    cursor: pointer;
}
.building-focus-level { display: grid; text-align: right; color: #aaa08d; font-size: 0.72rem; }
.building-focus-level strong { color: #e1c68e; font-size: 1rem; }
.building-focus-level small { margin-top: 2px; }
.building-focus-columns { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 16px; margin-top: 13px; }
.building-focus-columns h3,
.building-section-heading h3 { margin: 0 0 7px; color: #c9b17f; font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.06em; }
.building-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.building-resource { display: grid; padding: 6px 8px; border: 1px solid rgba(109, 91, 61, 0.55); background: rgba(6, 8, 7, 0.32); }
.building-resource span,
.building-resource small { color: #999080; font-size: 0.67rem; }
.building-resource strong { color: #cfc3aa; font-size: 0.84rem; }
.building-resource.is-missing strong { color: #d58d78; }
.building-production-info {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: 8px;
    padding: 0;
    border: 1px solid #856b3e;
    border-radius: 3px;
    color: #ead6ad;
    background: linear-gradient(#51442d, #2d281e);
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.building-production-info:hover,
.building-production-info:focus-visible { border-color: #c09a58; color: #fff0cb; outline: none; }
.rapid-fire-info-button { margin-top: 8px; width: auto; height: 32px; padding: 0 9px; font-size: .72rem; }
.rapid-fire-info-dialog { display: flex; flex-direction: column; width: min(580px, 100%); max-height: min(82dvh, 700px); }
.rapid-fire-info-content { overflow-y: auto; min-height: 0; padding: 12px 18px 18px; }
.rapid-fire-info-content > p { margin: 0 0 12px; color: #c8bda7; font-size: .78rem; line-height: 1.45; }
.rapid-fire-info-content section { padding: 9px 0; border-top: 1px solid rgba(160, 131, 81, .35); }
.rapid-fire-info-content h3 { margin: 0 0 7px; color: #d6bd8d; font-size: .78rem; }
.rapid-fire-info-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .75rem; }
.rapid-fire-info-row span { text-align: right; }
.rapid-fire-info-positive .rapid-fire-info-row { color: #91c78d; }
.rapid-fire-info-negative .rapid-fire-info-row { color: #d58d78; }
@media (max-width: 560px) { .rapid-fire-info-row { display: grid; gap: 1px; } .rapid-fire-info-row span { text-align: left; } }
.building-build-time { margin: 0 0 5px; color: #ddd0b5; font-weight: 700; }
.building-production { margin: 0; color: #9fb08d; font-size: 0.75rem; }
.building-requirement { display: flex; gap: 6px; align-items: center; color: #a7b994; font-size: 0.74rem; }
.building-requirement.missing { color: #d58d78; }
.building-requirement.fulfilled { color: #91c78d; }
.building-requirement-check { color: #91c78d; font-weight: 700; }
.building-focus-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.unit-focus-columns { grid-template-columns: 1.2fr 1fr; }
.unit-info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.unit-info-actions .building-production-info { margin: 0; width: 36px; min-width: 36px; height: 32px; padding: 0; font-size: .7rem; line-height: 1; flex: 0 0 36px; text-align: center; }
.unit-tech-tree-dialog { max-width: min(440px, calc(100vw - 30px)); }
.unit-tech-tree-items { display: grid; gap: 6px; padding: 12px; }
.unit-tech-tree-items .building-requirement { font-size: .82rem; }

/* Schlachtsimulator – kompakter Kriegstisch ohne externe Bildquellen. */
.combat-simulator-shell { position: relative; isolation: isolate; padding: 14px; border: 1px solid #705b38; border-radius: 8px; color: #ded1b5; background: radial-gradient(circle at 50% 0, rgba(89,65,38,.32), transparent 42%), linear-gradient(135deg, #171512, #28231b 48%, #141311); box-shadow: inset 0 0 0 3px rgba(20,17,13,.8), inset 0 -18px 35px rgba(0,0,0,.28); }
.combat-simulator-shell::after { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: 0; height: 28px; opacity: .32; background: repeating-linear-gradient(78deg, transparent 0 22px, #806440 23px 27px, #30271d 28px 32px); clip-path: polygon(0 100%,2% 18%,5% 100%,8% 7%,11% 100%,14% 25%,17% 100%,20% 4%,23% 100%,26% 20%,29% 100%,32% 2%,35% 100%,38% 18%,41% 100%,44% 5%,47% 100%,50% 17%,53% 100%,56% 4%,59% 100%,62% 20%,65% 100%,68% 5%,71% 100%,74% 22%,77% 100%,80% 3%,83% 100%,86% 19%,89% 100%,92% 6%,95% 100%,98% 20%,100% 100%); pointer-events: none; }
.combat-simulator-header { display: grid; grid-template-columns: 72px minmax(0,1fr) 92px; align-items: center; gap: 12px; margin-bottom: 12px; text-align: center; }
.combat-simulator-header h2 { margin: 1px 0 3px; color: #e2c486; letter-spacing: .12em; font-size: clamp(1.25rem,2.2vw,1.75rem); }
.combat-simulator-header p { margin: 0; color: #a99d87; font-size: .78rem; }
.combat-simulator-decoration { display: block; justify-self: center; opacity: .72; }
.combat-simulator-shield { position: relative; width: 52px; height: 52px; border: 4px solid #68563a; border-radius: 50%; background: radial-gradient(circle,#806944 0 9%,#29241d 10% 42%,#725a38 43% 49%,#24211b 50%); box-shadow: 0 4px 10px #000; }
.combat-simulator-shield::after { content: ""; position: absolute; width: 64px; height: 7px; left: -10px; top: 21px; border: 1px solid #8d7d62; border-radius: 3px; background: linear-gradient(90deg,#35261a,#a79a80 22% 78%,#35261a); transform: rotate(-38deg); }
.combat-simulator-siege { width: 78px; height: 47px; border-bottom: 7px solid #72583a; background: linear-gradient(150deg,transparent 48%,#756044 49% 55%,transparent 56%),linear-gradient(30deg,transparent 55%,#4f402d 56% 62%,transparent 63%); }
.combat-simulator-status { min-height: 1.2em; margin: 5px 0 10px; color: #bcae92; text-align: center; font-size: .76rem; }
.combat-simulator-status.is-error { color: #d78c7b; }
.combat-simulator-table { display: grid; grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); gap: 8px; align-items: start; }
.combat-simulator-camp { min-width: 0; padding: 10px; border: 1px solid rgba(153,124,75,.55); border-radius: 6px; background: linear-gradient(145deg,rgba(57,47,34,.88),rgba(25,23,19,.94)); box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.combat-simulator-defender { border-color: rgba(118,101,78,.75); background: linear-gradient(145deg,rgba(54,50,44,.9),rgba(24,23,22,.96)); }
.combat-simulator-camp > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(161,132,78,.34); }
.combat-simulator-camp h3 { margin: 0 0 7px; color: #d7bc87; letter-spacing: .08em; font-size: .95rem; }
.combat-simulator-scout-badge { margin-bottom: 7px; padding: 3px 6px; border: 1px solid #6e6284; border-radius: 999px; color: #c3b6da; background: rgba(55,43,70,.6); font-size: .62rem; }
.combat-simulator-versus { align-self: center; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #8a6d3f; border-radius: 50%; color: #d5b574; background: #211b15; font: 700 .82rem Georgia,serif; box-shadow: 0 0 14px rgba(116,77,142,.25); }
.combat-simulator-coordinates { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0 0 9px; padding: 6px; border: 1px solid rgba(134,111,73,.35); }
.combat-simulator-coordinates legend { padding: 0 5px; color: #aa9875; font-size: .66rem; }
.combat-simulator-coordinates label { display: grid; gap: 2px; color: #a99d87; font-size: .61rem; }
.combat-simulator-coordinates input,.combat-simulator-unit-row input,.combat-simulator-research input { box-sizing: border-box; width: 100%; min-width: 0; height: 28px; padding: 3px 6px; border: 1px solid #61543e; border-radius: 3px; color: #eee1c7; background: #151411; text-align: right; }
.combat-simulator-unit-group,.combat-simulator-research { margin-top: 8px; }
.combat-simulator-unit-group h4,.combat-simulator-research h4,.combat-simulator-result h4 { margin: 0 0 5px; color: #bda575; font-size: .69rem; letter-spacing: .08em; }
.combat-simulator-unit-list,.combat-simulator-research > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 7px; }
.combat-simulator-unit-row,.combat-simulator-research label { display: grid; grid-template-columns: minmax(0,1fr) 82px; align-items: center; gap: 6px; min-width: 0; color: #d1c5ad; font-size: .68rem; }
.combat-simulator-research { padding-top: 8px; border-top: 1px solid rgba(145,115,70,.32); }
.combat-simulator-research > p { margin: 0 0 6px; color: #958b79; font-size: .61rem; line-height: 1.35; }
.combat-simulator-research label { grid-template-columns: minmax(0,1fr) 62px; }
.combat-simulator-research small { grid-column: 1/-1; margin-top: -5px; color: #766d5e; font-size: .53rem; }
.combat-simulator-research input[data-unknown="true"] { border-style: dashed; color: #958b79; }
.combat-simulator-action { display: grid; justify-items: center; gap: 4px; padding: 14px 0 8px; }
.combat-simulator-submit { min-width: min(320px,100%); min-height: 42px; border: 1px solid #a48650; border-radius: 5px; color: #f0ddba; background: linear-gradient(#604b2d,#302419); font: 700 .82rem Georgia,serif; letter-spacing: .09em; cursor: pointer; box-shadow: inset 0 0 12px rgba(227,187,104,.12),0 3px 10px #000; }
.combat-simulator-submit:hover,.combat-simulator-submit:focus-visible { border-color: #d1ad65; box-shadow: inset 0 0 16px rgba(191,132,230,.18),0 3px 12px #000; outline: none; }
.combat-simulator-submit:disabled { opacity: .55; cursor: wait; }
.combat-simulator-action small { color: #887e6c; font-size: .62rem; }
.combat-simulator-result { margin: 8px 0 20px; padding: 11px; border: 1px solid #76603c; border-radius: 6px; background: rgba(15,14,12,.83); }
.combat-simulator-result > header { text-align: center; }
.combat-simulator-result h3 { margin: 0; color: #dec086; font-size: .95rem; }
.combat-simulator-result > header p { margin: 4px 0 9px; color: #958b79; font-size: .65rem; }
.combat-simulator-outcomes { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 11px; }
.combat-simulator-outcomes article { display: grid; justify-items: center; padding: 7px; border: 1px solid rgba(144,116,70,.42); background: rgba(48,41,31,.65); }
.combat-simulator-outcomes strong { color: #ddc389; font-size: 1.15rem; }
.combat-simulator-outcomes span { color: #aea28c; font-size: .61rem; text-align: center; }
.combat-simulator-result-units { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 8px; margin-bottom: 10px; }
.combat-simulator-result-units article { display: grid; padding: 5px 6px; border-left: 2px solid #765d38; background: rgba(51,44,34,.48); }
.combat-simulator-result-units strong { font-size: .68rem; }
.combat-simulator-result-units span,.combat-simulator-rebuild p,.combat-simulator-result > section > p { margin: 1px 0; color: #a99d87; font-size: .62rem; }
.scout-simulator-button { display: block; margin: 12px auto 0; }
@media (max-width: 1050px) { .combat-simulator-unit-list,.combat-simulator-research > div,.combat-simulator-result-units { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .combat-simulator-header { grid-template-columns: 42px minmax(0,1fr) 50px; }.combat-simulator-decoration { transform: scale(.72); }.combat-simulator-table { grid-template-columns: 1fr; }.combat-simulator-versus { justify-self: center; }.combat-simulator-unit-list,.combat-simulator-research > div,.combat-simulator-result-units { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 460px) { .combat-simulator-shell { padding: 9px; }.combat-simulator-header { grid-template-columns: 1fr; }.combat-simulator-decoration { display: none; }.combat-simulator-unit-list,.combat-simulator-research > div,.combat-simulator-result-units,.combat-simulator-outcomes { grid-template-columns: 1fr; } }

/* Schlachtsimulator V2 – Kriegstisch des Jarls. Ausschließlich auf die Simulatorseite begrenzt. */
.combat-simulator-shell {
    padding: 18px 18px 44px;
    border: 2px solid #98713e;
    border-radius: 3px;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(150,103,48,.28), transparent 42%),
        repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 1px, transparent 1px 37px),
        linear-gradient(105deg, #19130e 0%, #302116 34%, #1a1510 68%, #2a1d13 100%);
    box-shadow: inset 0 0 0 3px #21170f, inset 0 0 0 5px rgba(154,112,57,.45), inset 0 0 55px #050403, 0 8px 24px rgba(0,0,0,.5);
}
.combat-simulator-shell::before { content:""; position:absolute; inset:7px; z-index:-1; border:1px solid rgba(213,164,85,.2); background:linear-gradient(90deg,transparent 49.7%,rgba(188,132,61,.08) 50%,transparent 50.3%); pointer-events:none; }
.combat-simulator-shell::after { z-index:0; height:35px; opacity:.6; background:repeating-linear-gradient(78deg,transparent 0 20px,#9a7044 21px 25px,#342319 26px 31px); filter:drop-shadow(0 -3px 3px #000); }
.combat-simulator-header,.combat-simulator-status,#combat-simulator-content { position:relative; z-index:1; }
.combat-simulator-header { min-height:74px; margin:-5px 0 12px; border-bottom:1px solid rgba(180,128,59,.35); }
.combat-simulator-header::after { content:"ᛏ ᛁ ᚱ   ·   ᛟ ᛞ ᛁ ᚾ   ·   ᚦ ᛟ ᚱ"; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); padding:0 12px; color:#81613a; background:#1d160f; font-size:.55rem; letter-spacing:.38em; white-space:nowrap; }
.combat-simulator-header h2 { color:#f0cf8a; text-shadow:0 2px 1px #000,0 0 14px rgba(201,140,56,.22); }
.combat-simulator-shield { border-color:#a27a45; background:radial-gradient(circle,transparent 0 62%,rgba(15,10,7,.55) 78%),url("../images/units/barracks/shieldWarrior.webp") 57% 61%/230% auto no-repeat,#211810; box-shadow:inset 0 0 10px #000,0 5px 12px #000; }
.combat-simulator-shield::before { content:""; position:absolute; inset:7px; border:1px solid rgba(223,180,106,.45); border-radius:50%; }
.combat-simulator-shield::after { height:8px; border-color:#ba9c6b; background:linear-gradient(90deg,#2e1b10,#c4ad83 18% 78%,#422819); box-shadow:0 2px 3px #000; }
.combat-simulator-siege { position:relative; height:51px; border:2px solid #8b6b42; border-bottom:4px solid #9c7547; border-radius:2px; background:linear-gradient(rgba(16,12,9,.08),rgba(16,12,9,.42)),url("../images/units/workshop/trebuchet.webp") center/cover no-repeat; filter:drop-shadow(0 4px 3px #000); box-shadow:inset 0 0 8px #000; }
.combat-simulator-siege::before,.combat-simulator-siege::after { content:""; position:absolute; bottom:-9px; width:11px; height:11px; border:2px solid #9a754b; border-radius:50%; background:#1c1510; }
.combat-simulator-siege::before { left:10px; }.combat-simulator-siege::after { right:8px; }
.combat-simulator-table { grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); gap:10px; }
.combat-simulator-camp { padding:12px; border:1px solid #876136; border-top:3px solid #a87336; border-radius:2px; background:linear-gradient(145deg,rgba(70,42,22,.9),rgba(22,15,11,.97)); box-shadow:inset 0 0 0 1px rgba(225,167,83,.08),inset 0 0 28px rgba(0,0,0,.48),0 4px 12px rgba(0,0,0,.3); }
.combat-simulator-defender { border-color:#615d56; border-top-color:#868179; background:linear-gradient(145deg,rgba(55,52,47,.92),rgba(20,18,17,.98)); }
.combat-simulator-camp > header { min-height:30px; border-bottom-color:rgba(196,145,70,.48); }
.combat-simulator-camp h3 { color:#ebc77f; text-shadow:0 1px 2px #000; }
.combat-simulator-defender h3 { color:#d4cec3; }
.combat-simulator-versus { position:relative; width:43px; height:43px; border:2px solid #b08042; background:radial-gradient(circle,#402d1a,#17100b 70%); box-shadow:0 0 0 4px rgba(37,25,17,.9),0 0 18px rgba(155,105,45,.35); }
.combat-simulator-versus::before,.combat-simulator-versus::after { content:""; position:absolute; z-index:-1; width:74px; height:5px; border:1px solid #83623c; background:linear-gradient(90deg,#2b1b10,#a18459,#2b1b10); }
.combat-simulator-versus::before { transform:rotate(48deg); }.combat-simulator-versus::after { transform:rotate(-48deg); }
.combat-simulator-coordinates,.combat-simulator-target-resources { border:1px solid rgba(159,111,53,.55); background:rgba(8,6,5,.25); box-shadow:inset 0 2px 9px rgba(0,0,0,.45); }
.combat-simulator-target-resources { margin:0 0 9px; padding:7px; }
.combat-simulator-target-resources h4 { margin:0 0 3px; color:#bda575; font-size:.69rem; letter-spacing:.08em; }
.combat-simulator-target-resources > p { margin:0 0 6px; color:#918570; font-size:.6rem; }
.combat-simulator-target-resources > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 7px; }
.combat-simulator-target-resources label { display:grid; grid-template-columns:minmax(0,1fr) 82px; align-items:center; gap:6px; color:#d1c5ad; font-size:.68rem; }
.combat-simulator-coordinates input,.combat-simulator-unit-row input,.combat-simulator-research input,.combat-simulator-target-resources input { height:29px; border-color:#73552f; color:#f1dfbd; background:linear-gradient(#0c0a08,#1b1510); box-shadow:inset 0 2px 5px #000; }
.combat-simulator-coordinates input:focus,.combat-simulator-unit-row input:focus,.combat-simulator-research input:focus,.combat-simulator-target-resources input:focus { border-color:#d3a052; outline:1px solid rgba(211,160,82,.25); box-shadow:inset 0 2px 5px #000,0 0 8px rgba(211,160,82,.18); }
.combat-simulator-unit-group h4,.combat-simulator-research h4,.combat-simulator-target-resources h4,.combat-simulator-result h4 { display:flex; align-items:center; gap:7px; }
.combat-simulator-unit-group h4::after,.combat-simulator-research h4::after,.combat-simulator-target-resources h4::after,.combat-simulator-result h4::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(185,133,66,.55),transparent); }
.combat-simulator-unit-group.is-city-defense { padding:7px; border:1px solid rgba(108,104,97,.4); background:linear-gradient(90deg,rgba(92,88,80,.12),transparent); }
.combat-simulator-unit-row,.combat-simulator-research label { padding:2px 4px; border-left:2px solid rgba(156,108,52,.35); background:rgba(9,7,5,.18); }
.combat-simulator-submit { min-height:46px; border:2px solid #b2874c; background:linear-gradient(#74542d,#3b2717 52%,#26170f); color:#f5d99d; box-shadow:inset 0 0 0 2px rgba(25,16,10,.8),inset 0 0 14px rgba(236,178,80,.17),0 5px 12px #000; }
.combat-simulator-result { border:2px solid #8f6a39; background:linear-gradient(135deg,rgba(39,27,17,.96),rgba(12,10,8,.97)); box-shadow:inset 0 0 25px rgba(0,0,0,.55); }
.combat-simulator-economy { margin:10px 0; padding:10px; border:1px solid rgba(172,125,61,.48); background:rgba(63,43,24,.32); }
.combat-simulator-economy > strong { display:block; margin-top:7px; padding:7px 9px; border-left:3px solid currentColor; background:rgba(0,0,0,.25); font-size:.78rem; }
.combat-simulator-economy .is-positive { color:#8fca81; }.combat-simulator-economy .is-negative { color:#d47e70; }.combat-simulator-economy .is-neutral { color:#c2b596; }
.combat-current-battlefield { margin-top:12px; padding:12px; border:1px solid #806039; background:linear-gradient(135deg,rgba(76,50,25,.28),rgba(15,13,10,.5)); }
.combat-current-battlefield h4 { margin:0 0 7px; color:#dfbd7d; }.combat-current-battlefield p { margin:4px 0; }.combat-current-battlefield button { margin-top:8px; }
@media (max-width:720px) { .combat-simulator-table { grid-template-columns:1fr; }.combat-simulator-versus::before,.combat-simulator-versus::after { width:54px; }.combat-simulator-shell { padding-inline:11px; } }
@media (max-width:460px) { .combat-simulator-shell::before,.combat-simulator-header::after { display:none; }.combat-simulator-target-resources > div { grid-template-columns:1fr; } }
@media (max-width: 760px) { .unit-focus-columns { grid-template-columns: 1fr; } .unit-focus-columns > :last-child { grid-column: auto; } }
.training-max-shortcut { border: 0; border-bottom: 1px dotted #bba576; padding: 4px 2px; background: transparent; color: #dccca5; font: inherit; font-size: 0.75rem; cursor: pointer; white-space: nowrap; min-height: 30px; }
.training-max-shortcut:not(:disabled):hover, .training-max-shortcut:not(:disabled):focus-visible { color: #f0dbad; border-bottom-color: currentColor; }
.training-max-shortcut:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) { .building-focus-actions { flex-wrap: wrap; } }
.building-status { color: #b6ac98; font-size: 0.72rem; }
.building-status.status-resources,
.building-status.status-locked { color: #d58d78; }
.building-upgrade-button,
.building-queue-entry button { border: 1px solid #856b3e; color: #ead6ad; background: linear-gradient(#51442d, #2d281e); padding: 7px 12px; cursor: pointer; }
.building-upgrade-button:disabled { opacity: 0.48; cursor: not-allowed; }

.building-queue-panel { padding: 10px 12px; }
.building-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.building-section-heading .content-kicker { margin-bottom: 2px; }
.building-grid-heading { margin-top: 2px; }
.building-grid-heading > span { color: #908778; font-size: 0.7rem; }
.building-queue-list { display: grid; gap: 4px; }
.building-queue-entry { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 5px 7px; background: rgba(4, 6, 5, 0.32); border-top: 1px solid rgba(109, 91, 61, 0.35); }
.building-queue-entry div { display: grid; }
.building-queue-entry strong { color: #cbb78e; font-size: 0.76rem; }
.building-queue-entry small,
.building-queue-entry time { color: #aaa08d; font-size: 0.68rem; }
.building-queue-position { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #6d5a38; color: #d7bd86; }
.building-queue-entry button { padding: 3px 7px; font-size: 0.67rem; }

.buildings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 7px; }
.building-tile { display: grid; grid-template-rows: 70px auto; min-width: 0; padding: 0; text-align: left; color: inherit; border: 1px solid rgba(109, 91, 61, 0.62); background: rgba(18, 19, 16, 0.86); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.building-tile:hover { border-color: #a0844f; }
.building-tile.is-selected { border-color: #d0ae69; box-shadow: inset 0 0 0 1px rgba(208, 174, 105, 0.45); background: rgba(53, 43, 27, 0.9); }
.building-tile.status-locked,
.building-tile.status-queue-full { opacity: 0.66; }
.building-tile-copy { display: grid; gap: 1px; padding: 7px 8px; }
.building-tile-copy strong { overflow: hidden; color: #d4bd8e; font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.building-tile-copy span { color: #c5bba8; font-size: 0.72rem; }
.building-tile-copy small { color: #918979; font-size: 0.63rem; }
.building-tile.status-resources small,
.building-tile.status-locked small { color: #c88875; }
.building-tile.status-queued small { color: #d6b66f; }

.entity-info-button { margin-top: 7px; width: 100%; padding: 6px 9px; border: 1px solid #806a42; background: linear-gradient(#443820, #251f15); color: #e3c98f; cursor: pointer; font-size: 0.73rem; }
.entity-info-button:hover, .entity-info-button:focus-visible { border-color: #c4a462; background: linear-gradient(#594827, #302719); }
.building-demolition-summary { display: grid; gap: 3px; margin-top: 9px; padding: 8px 10px; border: 1px solid rgba(142, 78, 61, .62); background: rgba(54, 22, 18, .48); color: #d8c2ad; font-size: .72rem; }
.building-demolition-summary strong { color: #e0a58f; }
.building-demolition-summary small { color: #a9998b; }
.building-demolish-button { padding: 7px 12px; border: 1px solid #985845; background: linear-gradient(#653426, #321c17); color: #f0c1ad; cursor: pointer; }
.building-demolish-button:hover, .building-demolish-button:focus-visible { border-color: #d27b61; background: linear-gradient(#7a3e2d, #422019); }
.entity-info-backdrop { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 18px; background: rgba(0, 0, 0, 0.74); }
.entity-info-backdrop[hidden] { display: none; }
.entity-info-dialog { width: min(720px, 100%); max-height: min(82vh, 760px); overflow: hidden; border: 1px solid #9a7b43; background: linear-gradient(145deg, #211d17, #0e100e); box-shadow: 0 18px 60px #000; color: #d4c7af; }
.entity-info-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; border-bottom: 1px solid rgba(154, 123, 67, .55); }
.entity-info-dialog h2 { margin: 0; color: #ead5a4; font-size: 1.1rem; }
.entity-info-close { width: 34px; height: 34px; padding: 0; border: 1px solid #765f3c; background: #1a1712; color: #d8bd82; font-size: 1.25rem; }
.entity-info-tabs { display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid rgba(154, 123, 67, .35); }
.entity-info-tabs button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #5e5038; background: #171713; color: #bdb19b; font-size: .72rem; }
.entity-info-tabs button[aria-selected="true"] { border-color: #b18e50; background: #40351f; color: #f0dcae; }
.entity-info-content { max-height: calc(82vh - 112px); overflow-y: auto; padding: 14px 16px; line-height: 1.5; }
.entity-info-content h3 { margin: 0 0 8px; color: #d5b774; font-size: .88rem; }
.entity-info-content p { margin: 0 0 9px; }
@media (max-width: 600px) { .entity-info-backdrop { padding: 8px; } .entity-info-dialog { max-height: 92vh; } .entity-info-content { max-height: calc(92vh - 112px); } }

/* Moderate Verdichtung der Auswahlkarten in Kaserne, Schmiede und Forschung. */
#barracks-page .buildings-list,
#workshop-page .buildings-list,
#research-page .research-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 7px; }
#barracks-page .building-tile,
#workshop-page .building-tile,
#research-page .research-tile { grid-template-rows: 70px auto; }
#barracks-page .building-tile-copy,
#workshop-page .building-tile-copy,
#research-page .research-tile-copy { padding: 6px 7px; }
#barracks-page .building-focus,
#workshop-page .building-focus,
#research-page .research-focus { min-height: 225px; }
#barracks-page .building-focus-body,
#workshop-page .building-focus-body,
#research-page .research-focus-body { padding: 13px 15px; }
#barracks-page .building-focus-columns,
#workshop-page .building-focus-columns,
#research-page .research-focus-columns { gap: 13px; margin-top: 10px; }
.workshop-defense-heading { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(128, 101, 58, .46); }

@media (max-width: 1050px) {
    .building-focus-columns { grid-template-columns: 1fr 1fr; }
    .building-focus-columns > :last-child { grid-column: 1 / -1; }
    .unit-focus-columns > :last-child { grid-column: auto; }
}

@media (max-width: 760px) {
    .building-focus,
    .building-focus-empty { grid-template-columns: 1fr; padding-left: 0; }
    .building-focus-empty > div:first-child { padding: 18px; }
    .building-focus-image,
    .building-focus-atmosphere { min-height: 120px; max-height: 160px; }
    .building-focus-columns { grid-template-columns: 1fr; }
    .building-focus-columns > :last-child { grid-column: auto; }
    .building-queue-entry { grid-template-columns: 24px 1fr auto; }
    .building-queue-entry time { grid-column: 2; }
    .building-queue-entry button { grid-column: 3; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .building-focus-image::before,
    .research-focus-image::before { animation: none !important; }
}

/* Runenstein V2: Berichtsdaten sind Gravuren; Nebel und Energie bleiben eigene Ebenen. */
.report-modal-atmosphere {
    position: absolute;
    z-index: 0;
    width: min(1280px, calc(96dvh * 1.5988), 108vw);
    aspect-ratio: 793 / 496;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(116, 10, 14, .34));
}
.report-modal-veil {
    position: absolute;
    inset: -10%;
    background: url("/images/reports/runestone-red-veil.png") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.report-modal-veil-rear { opacity: .23; filter: blur(9px) saturate(.82); animation: report-veil-rear-drift 19s ease-in-out infinite alternate; }
.report-modal-veil-edge { inset: -4%; opacity: .15; filter: blur(3px) saturate(.78); animation: report-veil-edge-drift 13s ease-in-out infinite alternate-reverse; }
.report-modal-veil-front { z-index: 6; inset: 3%; opacity: .075; filter: blur(1px) saturate(.7); animation: report-veil-front-drift 17s ease-in-out infinite alternate; }
.report-modal { z-index: 1; }
.report-modal-awakening::before,
.report-modal-awakening::after {
    content: "";
    position: absolute;
    inset: 7% 6%;
    border-radius: 18%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 8% 52%, rgba(177, 22, 25, .14), transparent 28%),
        radial-gradient(ellipse at 91% 39%, rgba(103, 66, 218, .13), transparent 24%),
        linear-gradient(108deg, transparent 21%, rgba(var(--report-accent), .08) 49%, transparent 72%);
    mix-blend-mode: screen;
    animation: report-inner-energy 11s ease-in-out infinite alternate;
}
.report-modal-awakening::after { transform: scaleX(-1); opacity: .58; animation-duration: 15s; animation-direction: alternate-reverse; }

.report-modal-header,
.report-modal-content,
.report-modal-content :is(h3, h4, h5, p, dt, dd, th, td, strong, span, blockquote) {
    font-family: Georgia, "Times New Roman", serif;
}
.report-modal-kicker,
.report-modal-header h2,
.report-modal-subtitle,
.report-modal-content :is(h3, h4, h5, p, dt, dd, th, td, strong, span, blockquote) {
    color: #bcb4a5;
    text-shadow:
        1px 1px 0 rgba(255, 255, 255, .13),
        -1px -1px 0 rgba(0, 0, 0, .9),
        0 1px 2px rgba(0, 0, 0, .78);
}
.report-modal-header h2,
.report-modal-content :is(h3, h4, h5) {
    color: #c9c0af;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-shadow:
        1px 1px 0 rgba(255, 255, 255, .16),
        -1px -1px 0 #050606,
        0 2px 2px rgba(0, 0, 0, .9),
        0 0 10px rgba(var(--report-accent), .13);
}
.report-modal-header h2 { font-size: clamp(.94rem, 1.55vw, 1.32rem); }
.report-modal-content .combat-header > strong,
.report-modal-content .combat-result > h4,
.report-modal-content .message-report-outcome,
.report-modal-content .expedition-report-result {
    color: #c7a17f;
    text-shadow: 1px 1px 0 rgba(255,255,255,.11), -1px -1px 0 #140504, 0 0 8px rgba(var(--report-ember), .3);
}

.report-modal-content .combat-header,
.report-modal-content .combat-force,
.report-modal-content .combat-result,
.report-modal-content .combat-round,
.report-modal-content .combat-summary,
.report-modal-content .scout-loot-summary,
.report-modal-content .expedition-report-header,
.report-modal-content .expedition-report blockquote,
.report-modal-content .expedition-report-result,
.report-modal-content .message-report-header,
.report-modal-content .message-report-section,
.report-modal-content .message-report-facts,
.report-modal-content .message-report-body,
.report-modal-content .message-report-outcome,
.report-modal-content .message-report-new-city,
.report-modal-content .combat-round-balance,
.report-modal-content .combat-legacy-note {
    position: relative;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.report-modal-content .combat-header::after,
.report-modal-content :is(.combat-round, .combat-summary, .combat-result, .message-report-section, .message-report-facts, .message-report-body, .expedition-report-header, blockquote)::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: -2px;
    left: 4%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.78) 13%, rgba(var(--report-accent),.16) 50%, rgba(255,255,255,.11) 51%, rgba(0,0,0,.78) 87%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.055);
}
.report-modal-content :is(.combat-table, .message-report-table) {
    border: 0;
    border-collapse: collapse;
    background: transparent;
}
.report-modal-content :is(.combat-table, .message-report-table) :is(th, td) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
}
.report-modal-content :is(.combat-table, .message-report-table) tr + tr :is(th, td) {
    border-top: 1px solid rgba(5, 6, 7, .38) !important;
}
.report-modal-content :is(.combat-table, .message-report-table) tr:first-child th {
    color: #b6aa96;
    border-bottom: 1px solid rgba(5, 6, 7, .72) !important;
    box-shadow: inset 0 -1px rgba(255,255,255,.055);
    letter-spacing: .045em;
}
.report-modal-content .combat-table th:first-child { position: static; }
.report-modal-content .combat-legacy-note { padding-left: 30px; font-style: italic; }
.report-modal-content .combat-legacy-note::before {
    content: "ᛟ";
    position: absolute;
    left: 8px;
    color: rgba(var(--report-accent), .72);
    text-shadow: -1px -1px #050606, 1px 1px rgba(255,255,255,.09), 0 0 7px rgba(var(--report-accent),.28);
}
.report-modal-content .combat-loss { color: #b97a73; }
.report-modal-content .combat-result h5:first-of-type + p { color: #c6ae7e; }
.report-modal-content .message-report-body { line-height: 1.58; }

.report-modal.is-awakening .report-modal-content {
    animation: report-inscriptions-reveal .66s .55s ease-out forwards;
}
@keyframes report-inscriptions-reveal {
    0% { opacity: 0; filter: brightness(.35) blur(1px); text-shadow: 0 0 13px rgba(var(--report-accent), .7); }
    58% { opacity: 1; filter: brightness(1.28); }
    100% { opacity: 1; filter: none; }
}
@keyframes report-veil-rear-drift { from { transform: translate3d(-3%, 2%, 0) scale(1.03); } to { transform: translate3d(3%, -2%, 0) scale(1.1); } }
@keyframes report-veil-edge-drift { from { transform: translate3d(2%, -1%, 0) scaleX(1.02); } to { transform: translate3d(-2%, 2%, 0) scaleX(1.08); } }
@keyframes report-veil-front-drift { from { transform: translate3d(-1%, -2%, 0); opacity: .045; } to { transform: translate3d(2%, 1%, 0); opacity: .085; } }
@keyframes report-inner-energy { from { opacity: .38; transform: translateX(-1.5%); } to { opacity: .72; transform: translateX(1.5%); } }

@media (max-width: 760px), (max-height: 620px) {
    .report-modal-atmosphere { width: min(calc(100vw + 12px), calc((100dvh + 12px) * .75)); aspect-ratio: 543 / 724; }
    .report-modal-header h2 { font-size: .92rem; }
    .report-modal-content :is(h3, h4, h5) { letter-spacing: .065em; }
    .report-modal-content :is(.combat-table, .message-report-table) :is(th, td) { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .report-modal-veil,
    .report-modal-awakening::before,
    .report-modal-awakening::after,
    .report-modal.is-awakening .report-modal-content { animation: none !important; opacity: 1; transform: none; filter: none; }
    .report-modal-veil-rear { opacity: .16; }
    .report-modal-veil-edge { opacity: .1; }
    .report-modal-veil-front { opacity: .045; }
}

#game-content-window:has(#movements-page.active-page) {
    background: linear-gradient(180deg, rgba(18, 19, 16, 0.08), rgba(8, 10, 8, 0.04));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.movement-page-content { display: grid; gap: 8px; min-width: 0; }
.movement-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 292px); align-items: start; gap: 8px; min-width: 0; }
.movement-units-panel { display: grid; gap: 8px; min-width: 0; }
.movement-slot-status {
    padding: 5px 8px;
    color: #c7bcaa;
    font-size: 0.68rem;
    border: 1px solid rgba(109, 91, 61, 0.55);
    background: rgba(6, 8, 7, 0.32);
}
.movement-origin,
#movement-units,
#movement-summary,
#movement-target,
#movement-preview { border: 1px solid rgba(109, 91, 61, 0.58); }
.movement-origin { background: rgba(16, 18, 15, 0.76); }
#movement-units,
#movement-summary { background: rgba(10, 13, 10, 0.3); }
#movement-target { background: rgba(10, 13, 10, 0.34); }
#movement-preview { background: rgba(9, 12, 9, 0.38); }
.movement-origin { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 10px; }
.movement-origin h3,
.movement-origin p { margin: 0; }
.movement-origin p { color: #aaa08d; font-size: 0.72rem; }

#movement-units { display: grid; gap: 6px; padding: 6px; }
.movement-unit-group { display: grid; gap: 4px; min-width: 0; }
.movement-unit-group + .movement-unit-group { padding-top: 5px; border-top: 1px solid rgba(150,121,73,.48); }
.movement-unit-group-title { margin: 0; color: #cdb27b; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.movement-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 104px)); gap: 6px; min-width: 0; }
.movement-unit-card { position: relative; display: grid; grid-template-rows: auto auto; min-width: 0; width: 100%; max-width: 104px; overflow: visible; border: 1px solid rgba(109, 91, 61, 0.58); background: linear-gradient(135deg, rgba(8, 11, 9, 0.82), rgba(38, 32, 22, 0.62)); transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.movement-unit-card.is-selected { border-color: rgba(202,157,78,.88); background: linear-gradient(135deg,rgba(35,29,18,.9),rgba(71,51,25,.68)); box-shadow: inset 0 0 0 1px rgba(202,157,78,.18); }
.movement-unit-icon { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid rgba(134, 106, 60, 0.5); background: linear-gradient(145deg, #171a15, #0c0f0c); }
.movement-unit-icon img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.movement-unit-copy { position: absolute; z-index: 2; inset: auto 0 0; min-width: 0; padding: 20px 5px 5px; background: linear-gradient(transparent, rgba(3, 5, 4, 0.94)); }
.movement-unit-card h3 { overflow: hidden; margin: 0 0 1px; color: #f0dfbd; font-size: 0.67rem; line-height: 1.1; text-shadow: 0 1px 3px #000; text-overflow: ellipsis; white-space: nowrap; }
.movement-unit-card p { margin: 0; color: #d0c5af; font-size: 0.58rem; line-height: 1.2; text-shadow: 0 1px 3px #000; }
.movement-unit-stock { color: #c8bda7 !important; }
.movement-unit-info { position:absolute;z-index:3;top:4px;right:4px;width:19px;height:19px;padding:0;border:1px solid rgba(191,153,88,.8);border-radius:50%;color:#ead39f;background:rgba(5,8,6,.84);font:700 .61rem/17px serif;cursor:help; }
.movement-unit-tooltip { position:absolute;z-index:10;top:26px;left:4px;width:calc(100% - 8px);padding:5px;border:1px solid rgba(143,112,65,.75);color:#d1c3a7!important;background:rgba(6,9,7,.96);font-size:.57rem!important;line-height:1.3!important;white-space:normal!important;box-shadow:0 5px 12px rgba(0,0,0,.55); }
.movement-unit-tooltip[hidden] { display:none; }
.movement-unit-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; min-height: 34px; padding: 4px; }
.movement-unit-controls .secondary-button { min-height: 24px; padding: 2px 5px; font-size: 0.58rem; }
.movement-unit-amount { min-width: 0; width: 100%; min-height: 24px; padding: 2px 3px; font-size: .66rem; }

#movement-summary { display: flex; align-items: center; gap: 18px; padding: 6px 10px; }
#movement-summary h3 { margin: 0 auto 0 0; font-size: 0.78rem; }
#movement-summary p { margin: 0; color: #aaa08d; font-size: 0.68rem; }
#movement-summary[hidden] { display: none; }

#movement-target { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 6px 4px; padding: 9px; }
.movement-target-heading { grid-column: 1 / -1; margin: 0 0 2px; color: #cdb27b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.movement-coordinate-field { display: grid; gap: 2px; margin: 0; }
.movement-coordinate-field label { color: #918878; font-size: 0.6rem; }
.movement-coordinate-field input { width: 100%; min-width: 0; padding: 5px 6px; }
.movement-coordinate-separator { align-self: end; padding-bottom: 6px; color: #9e875d; }
#movement-preview-button { grid-column: 1 / -1; min-height: 31px; padding: 5px 10px; }
.movement-speed-control { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 0; color: #b9ad98; font-size: 0.7rem; }
.movement-speed-control select { min-width: 78px; padding: 5px 7px; border: 1px solid #80683f; color: #ead6ad; background: #29251d; }
#movement-preview-message,
#movement-mission-selection,
#movement-preview { grid-column: 1 / -1; }
#movement-preview-message { min-height: 0; margin: 0; color: #d3b77d; font-size: 0.7rem; }

#movement-mission-selection { display: grid; grid-template-columns: 1fr; gap: 3px; padding-top: 6px; border-top: 1px solid rgba(150, 121, 73, 0.5); background: transparent; }
#movement-mission-selection > h3 { grid-column: 1 / -1; margin: 0 0 2px; color: #bca474; font-size: 0.7rem; text-transform: uppercase; }
.movement-mission-option { position: relative; display: grid; place-items: center; min-height: 31px; padding: 4px 5px; border: 1px solid rgba(126, 99, 55, 0.65); color: #c9b993; background: rgba(9, 12, 10, 0.55); font-size: 0.62rem; text-align: center; cursor: pointer; }
.movement-mission-option input { position: absolute; opacity: 0; pointer-events: none; }
.movement-mission-option:has(input:checked) { border-color: #d2ad65; color: #f0d69e; background: rgba(83, 63, 31, 0.72); box-shadow: inset 0 0 0 1px rgba(210, 173, 101, 0.25); }
.movement-mission-option:has(input:disabled) { opacity: 0.42; cursor: not-allowed; }

#movement-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; padding: 7px; }
#movement-preview > h3 { grid-column: 1 / -1; margin: 0 0 2px; color: #cdb27b; font-size: 0.72rem; text-transform: uppercase; }
#movement-preview > p { margin: 0; color: #9f9685; font-size: 0.65rem; }
#movement-preview[hidden] { display: none; }
#movement-dispatch-button { grid-column: 1 / -1; justify-self: stretch; min-width: 0; margin-top: 4px; }

.movement-cargo-selection { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 3px; padding-top: 6px; border-top: 1px solid rgba(109, 91, 61, 0.38); }
.movement-cargo-selection > h3,
.movement-cargo-selection > p,
.movement-cargo-summary { grid-column: 1 / -1; margin: 0; }
.movement-cargo-selection > h3 { color: #bca474; font-size: 0.7rem; }
.movement-cargo-selection > p { color: #918878; font-size: 0.61rem; }
.movement-cargo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; align-items: center; }
.movement-cargo-row label,
.movement-cargo-available { font-size: 0.59rem; color: #9e9584; }
.movement-cargo-row input { min-width: 0; width: 100%; padding: 4px 5px; }
.movement-cargo-row .secondary-button { grid-column: 2; grid-row: 1 / span 2; padding: 4px 6px; font-size: 0.6rem; }
.movement-cargo-summary { display: flex; gap: 16px; }
.movement-cargo-summary p { margin: 0; font-size: 0.63rem; }
.movement-expedition-options { grid-column: 1 / -1; padding: 6px 8px; }
.movement-attack-group-options { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 1px solid rgba(109, 91, 61, 0.4); background: rgba(8, 10, 8, 0.38); }
.movement-attack-group-options label { color: #c6b58f; font-size: 0.67rem; }
.movement-attack-group-options input { width: 160px; margin-left: 6px; padding: 4px 6px; }
.movement-attack-group-options p { margin: 0; color: #918878; font-size: 0.61rem; }
.movement-recall-confirmation { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; margin-top: 7px; padding: 7px; border: 1px solid rgba(151, 111, 55, 0.72); background: rgba(45, 31, 18, 0.72); }
.movement-recall-confirmation > p:first-child { grid-column: 1 / -1; margin: 0; color: #ddc38d; font-size: 0.72rem; }
.movement-recall-confirmation button { padding: 4px 8px; font-size: 0.65rem; }
.movement-recall-status { margin: 0; color: #d5a982; font-size: 0.66rem; }

.messages-navigation-count { min-width: 18px; margin-left: auto; padding: 1px 5px; border: 1px solid #9d7138; border-radius: 10px; color: #f2d18d; background: #58301f; font-size: 0.62rem; text-align: center; }
.messages-content { display: grid; gap: 8px; min-width: 0; }
.messages-tabs { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 3px; }
.messages-tab { display: inline-flex; align-items: center; gap: 5px; flex: 1 0 auto; justify-content: center; min-width: 82px; padding: 6px 8px; border: 1px solid rgba(121,93,51,.72); color: #bbae95; background: rgba(16,19,16,.82); cursor: pointer; }
.messages-tab.is-active { border-color: #d0a75d; color: #efd49b; background: rgba(72,52,28,.86); }
.messages-tab-count { min-width: 17px; padding: 1px 4px; border-radius: 9px; color: #e7c681; background: rgba(104,55,31,.8); font-size: .6rem; }
.messages-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
#messages-status { color: #d5a982; font-size: .68rem; }
.messages-compose { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(136,103,55,.75); background: linear-gradient(145deg,rgba(12,16,14,.94),rgba(43,33,22,.9)); }
.messages-compose label { display: grid; gap: 3px; color: #baa984; font-size: .68rem; }
.messages-compose input,.messages-compose textarea { width: 100%; padding: 6px; }
.messages-compose textarea { min-height: 110px; resize: vertical; }
.messages-list { display: grid; gap: 3px; }
.message-row { display: grid; grid-template-columns: 16px 22px minmax(0,1fr) auto auto auto; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(95,79,50,.45); background: rgba(8,11,9,.48); }
.message-row.is-unread { border-left: 3px solid #c99b50; background: rgba(48,37,23,.62); }
.message-unread-marker { color: #e2ad58; }
.message-type-marker { color: #b99658; font-size: .85rem; text-align: center; }
.message-row strong { color: #d4bd8d; font-size: .73rem; }
.message-official-badge { display: block; color: #d2ad65; font-size: .59rem; letter-spacing: .04em; }
.report-modal-content .message-report-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row p { margin: 2px 0 0; color: #968d7d; font-size: .63rem; }
.message-row time { color: #8f8778; font-size: .61rem; }
.message-row button { padding: 4px 6px; font-size: .61rem; }
.message-structured-block { margin: 3px 0; padding: 6px; border-left: 1px solid rgba(151,116,62,.48); }
.message-structured-block h4,.message-structured-block p { margin: 2px 0; }
.message-structured-block h4 { color: #bda675; font-size: .7rem; }
.message-structured-block p { color: #aaa08e; font-size: .64rem; }
.combat-report{gap:8px}.combat-header,.combat-force,.combat-result{padding:8px;border:1px solid rgba(151,116,62,.55);background:rgba(8,12,10,.72)}.combat-header h3,.combat-force h4,.combat-result h4{margin:0;color:#e1c37e}.combat-header strong{display:block;margin-top:5px;color:#d7a64e;font-size:1rem}.combat-header p{margin:4px 0 0;color:#a99c86}.combat-table-scroll{max-width:100%;overflow-x:auto}.combat-table{width:100%;min-width:max-content;border-collapse:collapse;margin-top:5px}.combat-table th,.combat-table td{min-width:82px;padding:4px 7px;border:1px solid rgba(124,98,57,.45);text-align:right;font-size:.66rem}.combat-table th:first-child{text-align:left;position:sticky;left:0;background:#171711}.combat-table tr:first-child th{color:#d8bd82;background:#252016}.combat-result h5{margin:7px 0 2px;color:#bda675}.combat-result p{margin:0;color:#c7b99d}.scout-report{gap:8px}.scout-table th,.scout-table td{text-align:left}.scout-table th:last-child,.scout-table td:last-child{text-align:right}.scout-section h4{letter-spacing:.04em}
.report-coordinate-link { padding: 0; border: 0; color: #dfbd72; background: transparent; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.report-coordinate-link:hover,
.report-coordinate-link:focus-visible { color: #ffe2a1; outline: 1px solid rgba(223, 189, 114, .65); outline-offset: 2px; }
.scout-loot-summary { padding: 8px; border: 1px solid rgba(151,116,62,.55); background: rgba(8,12,10,.72); }
.scout-loot-summary h4 { margin: 7px 0 3px; color: #bda675; font-size: .72rem; letter-spacing: .04em; }
.scout-loot-summary p { margin: 2px 0; color: #c7b99d; font-size: .7rem; }
.report-transport-link { padding: 0; border: 0; color: #dfbd72; background: transparent; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.report-transport-link:hover,
.report-transport-link:focus-visible { color: #ffe2a1; outline: 1px solid rgba(223,189,114,.65); outline-offset: 2px; }
.expedition-report{gap:10px}.expedition-report-header{padding:12px;border:1px solid rgba(151,116,62,.58);background:linear-gradient(145deg,rgba(8,13,11,.92),rgba(42,31,19,.84))}.expedition-report-header span{color:#9f8b66;font-size:.62rem;letter-spacing:.13em}.expedition-report-header h3{margin:4px 0;color:#e0c17d}.expedition-report-header p{margin:3px 0 0;color:#9e9585;font-size:.68rem}.expedition-report blockquote{margin:0;padding:12px 14px;border-left:3px solid #9b713b;color:#c8bda8;background:rgba(8,12,10,.66);font-style:italic;line-height:1.55}.expedition-report-result{display:block;padding:11px;border:1px solid rgba(180,139,71,.7);color:#ebc979;background:rgba(61,43,22,.64);font-size:.88rem}.expedition-report-cargo{margin:0;color:#a9a08f;font-size:.68rem}
@media (max-width:760px){.message-row{grid-template-columns:14px 20px minmax(0,1fr) auto}.message-row time{grid-column:3}.message-row button{grid-row:1 / span 2}.messages-toolbar{align-items:stretch}.messages-compose{padding:7px}.expedition-report-header,.expedition-report blockquote,.expedition-report-result{padding:9px}}
.combat-round{display:grid;gap:6px;padding:9px;border:1px solid rgba(151,116,62,.62);background:rgba(20,18,13,.7)}.combat-round>h3,.combat-summary>h3{margin:0;color:#dfbf78;letter-spacing:.08em}.combat-summary{display:grid;gap:6px}.combat-legacy-note{margin:0;padding:9px;border:1px solid rgba(151,116,62,.45);color:#aaa08d;background:rgba(8,12,10,.55)}.combat-round-table th:first-child,.combat-round-table td:first-child{text-align:left}.combat-round-table td{text-align:right}
.combat-round-balance{margin:2px 0;padding:6px;color:#bfb092;background:rgba(8,12,10,.48);font-size:.65rem}.message-game-report{gap:8px}.message-report-header,.message-report-section,.message-report-facts,.message-report-body{padding:9px;border:1px solid rgba(151,116,62,.5);background:rgba(8,12,10,.68)}.message-report-header span{color:#b99555;font-size:.62rem;letter-spacing:.12em}.message-report-header h3,.message-report-section h4{margin:2px 0;color:#e1c37e}.message-report-header p,.message-report-body{margin:3px 0;color:#b8ad98}.message-report-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}.message-report-facts dt{color:#a99268}.message-report-facts dd{margin:0;color:#d4c7ad}.message-report-table{width:100%;border-collapse:collapse}.message-report-table th,.message-report-table td{padding:5px 7px;border:1px solid rgba(124,98,57,.45);text-align:left}.message-report-table th:last-child,.message-report-table td:last-child{text-align:right}.message-report-outcome{padding:7px;border-left:3px solid #b8893e;color:#e1c37e;background:rgba(67,48,24,.45)}

/* Gemeinsamer Rahmen für ausführliche Spionage- und Kampfberichte. */
.report-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 4, 3, .78);
}
.report-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, calc(100vw - 32px));
    height: auto;
    max-height: min(88dvh, 900px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid #907042;
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(8, 12, 10, .99), rgba(39, 29, 19, .98));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .82), inset 0 0 0 1px rgba(214, 178, 108, .08);
}
.report-modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(151, 116, 62, .7);
    background: linear-gradient(180deg, rgba(54, 42, 27, .98), rgba(23, 20, 15, .98));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.report-modal-kicker { color: #a98e61; font-size: .59rem; letter-spacing: .13em; text-transform: uppercase; }
.report-modal-header h2 { margin: 2px 0 0; color: #e4c580; font-size: 1.08rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .07em; }
.report-modal-subtitle { margin: 2px 0 0; color: #a99d89; font-size: .67rem; line-height: 1.25; }
.report-modal-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(151, 116, 62, .65);
    border-radius: 3px;
    color: #ddc38f;
    background: rgba(12, 14, 11, .72);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.report-modal-close:hover,
.report-modal-close:focus-visible { border-color: #d1a75b; color: #fff1ce; outline: none; }
.report-modal-content {
    min-height: 0;
    max-height: calc(min(88dvh, 900px) - 72px);
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.report-modal-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
.report-modal-content > .combat-report,
.report-modal-content > .scout-report,
.report-modal-content > .expedition-report,
.report-modal-content > .message-game-report { display: grid; gap: 7px; }
.report-modal-content .combat-header,
.report-modal-content .combat-force,
.report-modal-content .combat-result { padding: 7px; }
.report-modal-content .combat-header strong { margin-top: 0; font-size: .9rem; }
.report-modal-content .combat-header p { margin-top: 3px; font-size: .65rem; line-height: 1.3; }
.report-modal-content .combat-round { gap: 5px; padding: 7px; }
.combat-round-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.combat-round-side { display: grid; align-content: start; gap: 5px; min-width: 0; }
.combat-round-side > h4 { margin: 0; color: #c7a866; font-size: .69rem; letter-spacing: .08em; }
.report-modal-content .combat-table { margin-top: 3px; }
.report-modal-content .combat-table th,
.report-modal-content .combat-table td { min-width: 64px; padding: 3px 5px; font-size: .62rem; line-height: 1.2; }
.report-modal-content .combat-round-table th:first-child,
.report-modal-content .combat-round-table td:first-child { min-width: 112px; }
.combat-loss { color: #e18a78; font-weight: 700; }
.report-modal-content .combat-round-balance { margin: 0; padding: 5px; font-size: .6rem; line-height: 1.3; }
.report-modal-content .combat-summary { gap: 5px; padding: 7px; border: 1px solid rgba(151, 116, 62, .62); background: rgba(20, 18, 13, .7); }
.report-modal-content .scout-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-modal-content .scout-report > .combat-header { grid-column: 1 / -1; }
.report-modal-content .scout-table { min-width: 0; }
.report-modal-content > .expedition-report,
.report-modal-content > .message-game-report { width: min(100%, 720px); margin: 0 auto; }
.report-modal-content .expedition-report-header,
.report-modal-content .expedition-report blockquote,
.report-modal-content .expedition-report-result,
.report-modal-content .message-report-header,
.report-modal-content .message-report-section,
.report-modal-content .message-report-facts,
.report-modal-content .message-report-body { padding: 7px 8px; }
.report-modal-content .expedition-report blockquote { line-height: 1.4; }
.report-modal-content .message-report-header h3 { font-size: .88rem; line-height: 1.25; }
.report-modal-content .message-report-header p,
.report-modal-content .message-report-body { font-size: .7rem; line-height: 1.4; }
.report-modal-content .message-report-facts { font-size: .71rem; line-height: 1.3; }
.report-modal-content .message-report-table th,
.report-modal-content .message-report-table td { padding: 3px 6px; font-size: .68rem; line-height: 1.25; }
.message-report-new-city { margin: 0; padding: 7px 8px; border-left: 3px solid #7baa66; color: #bdd7a8; background: rgba(37, 73, 35, .4); font-size: .74rem; }

@media (max-width: 760px), (max-height: 620px) {
    .report-modal-backdrop { padding: 6px; }
    .report-modal { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 4px; }
    .report-modal-header { padding: 8px 9px; }
    .report-modal-content { max-height: calc(100dvh - 78px); padding: 6px; }
}
@media (max-width: 680px) {
    .combat-round-sides,
    .report-modal-content .scout-report { grid-template-columns: minmax(0, 1fr); }
    .report-modal-content .scout-report > .combat-header { grid-column: auto; }
}

/* Runenstein-Bericht: Der Stein selbst ist Rahmen, Hintergrund und Berichtsträger. */
body.report-modal-open { overflow: hidden; }
.report-modal-backdrop {
    overflow: hidden;
    padding: clamp(6px, 1.5dvh, 16px);
    background:
        radial-gradient(ellipse at 50% 48%, rgba(42, 35, 68, .22), transparent 58%),
        rgba(1, 3, 4, .88);
    isolation: isolate;
}
.report-modal-backdrop::before,
.report-modal-backdrop::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 45% -20% -25%;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(119, 128, 154, .16), transparent 62%);
    filter: blur(18px);
    animation: report-fog-drift 12s ease-in-out infinite alternate;
}
.report-modal-backdrop::after { inset: -15% -25% 58%; opacity: .45; animation-direction: alternate-reverse; }
.report-modal {
    --report-accent: 114, 131, 255;
    --report-ember: 205, 70, 45;
    position: relative;
    width: min(1180px, calc(92dvh * 1.5988), calc(100vw - 20px));
    height: auto;
    aspect-ratio: 793 / 496;
    max-height: none;
    padding: clamp(74px, 9%, 108px) clamp(82px, 9%, 120px) clamp(68px, 8%, 96px);
    border: 0;
    border-radius: 0;
    background: url("/images/reports/runestone-report-wide.webp") center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .82));
    transform-origin: 50% 55%;
}
.report-modal[data-category="combat"] { --report-accent: 214, 74, 48; --report-ember: 244, 116, 50; }
.report-modal[data-category="scout"] { --report-accent: 82, 157, 231; --report-ember: 110, 128, 173; }
.report-modal[data-category="expedition"] { --report-accent: 137, 102, 238; --report-ember: 73, 148, 214; }
.report-modal[data-category="movement"] { --report-accent: 177, 137, 87; --report-ember: 213, 83, 47; }
.report-modal[data-category="alliance"] { --report-accent: 157, 116, 226; --report-ember: 205, 148, 70; }
.report-modal[data-category="player"] { --report-accent: 125, 157, 189; --report-ember: 174, 125, 75; }
.report-modal[data-category="system"] { --report-accent: 111, 143, 176; --report-ember: 137, 105, 74; }
.report-modal.is-awakening { animation: report-stone-emerge 1.05s cubic-bezier(.2, .68, .18, 1) both; }
.report-modal-awakening { position: absolute; z-index: 3; inset: 3%; overflow: hidden; pointer-events: none; }
.report-modal-rune-glow,
.report-modal-energy-pulse { position: absolute; inset: 0; border-radius: 18%; pointer-events: none; }
.report-modal-rune-glow {
    box-shadow: inset 0 0 34px rgba(var(--report-accent), .38), 0 0 28px rgba(var(--report-accent), .18);
    animation: report-runes-awaken 1.3s ease-out both, report-runes-rest 7s 1.3s ease-in-out infinite alternate;
}
.report-modal-energy-pulse {
    background: radial-gradient(ellipse, rgba(var(--report-accent), .42), transparent 62%);
    mix-blend-mode: screen;
    animation: report-energy-pulse 1.1s .28s ease-out both;
}
.report-modal-header {
    z-index: 4;
    padding: 0 4px 9px;
    border: 0;
    border-bottom: 1px solid rgba(var(--report-accent), .35);
    background: transparent;
    box-shadow: 0 7px 13px -13px rgba(var(--report-accent), .8);
    opacity: 0;
    animation: report-content-reveal .34s .7s ease-out forwards;
}
.report-modal-kicker { color: rgba(var(--report-accent), .9); text-shadow: 0 0 9px rgba(var(--report-accent), .38); }
.report-modal-header h2 { color: #e8ddc7; text-shadow: 0 1px 2px #000, 0 0 12px rgba(var(--report-accent), .26); }
.report-modal-subtitle { color: #bcb4a6; }
.report-modal-close {
    width: 42px;
    height: 42px;
    margin: -5px -3px 0 0;
    border: 0;
    border-radius: 50%;
    color: #ddd1b9;
    background: radial-gradient(circle, rgba(46, 48, 47, .86), rgba(12, 14, 15, .72));
    box-shadow: inset 0 0 0 1px rgba(var(--report-accent), .42), 0 0 9px rgba(var(--report-accent), .18);
    font-family: Georgia, serif;
    text-shadow: 0 0 7px rgba(var(--report-accent), .55);
}
.report-modal-close:hover,
.report-modal-close:focus-visible { border: 0; color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--report-accent), .9), 0 0 14px rgba(var(--report-accent), .55); }
.report-modal-content {
    z-index: 2;
    max-height: none;
    padding: 10px 5px 4px;
    color: #d2c9b8;
    opacity: 0;
    animation: report-content-reveal .42s .76s ease-out forwards;
}
.report-modal-content .combat-header,
.report-modal-content .combat-force,
.report-modal-content .combat-result,
.report-modal-content .combat-round,
.report-modal-content .combat-summary,
.report-modal-content .scout-loot-summary,
.report-modal-content .expedition-report-header,
.report-modal-content .expedition-report blockquote,
.report-modal-content .expedition-report-result,
.report-modal-content .message-report-header,
.report-modal-content .message-report-section,
.report-modal-content .message-report-facts,
.report-modal-content .message-report-body {
    border: 0;
    border-bottom: 1px solid rgba(var(--report-accent), .24);
    background: linear-gradient(90deg, transparent, rgba(4, 7, 9, .2) 12%, rgba(4, 7, 9, .2) 88%, transparent);
    box-shadow: none;
}
.report-modal-content .combat-table th,
.report-modal-content .combat-table td,
.report-modal-content .message-report-table th,
.report-modal-content .message-report-table td { border-color: rgba(var(--report-accent), .2); background: rgba(5, 8, 10, .13); }
.report-modal-content .combat-table th:first-child { background: rgba(20, 22, 21, .82); }
.report-modal-content h3,
.report-modal-content h4,
.report-modal-content h5 { text-shadow: 0 0 9px rgba(var(--report-accent), .22); }
.report-modal[data-category="combat"] .combat-loss { color: #f29a83; text-shadow: 0 0 7px rgba(var(--report-ember), .35); }
@keyframes report-stone-emerge {
    0% { opacity: 0; transform: translateY(16px) scale(.93); filter: blur(5px) drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
    54% { opacity: 1; transform: translateY(0) scale(1.012); filter: blur(0) drop-shadow(0 25px 34px rgba(0,0,0,.88)); }
    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 22px 28px rgba(0,0,0,.82)); }
}
@keyframes report-runes-awaken { 0% { opacity: 0; } 38% { opacity: .28; } 72% { opacity: 1; } 100% { opacity: .48; } }
@keyframes report-energy-pulse { 0%, 34% { opacity: 0; transform: scale(.78); } 61% { opacity: .9; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes report-runes-rest { from { opacity: .28; } to { opacity: .58; } }
@keyframes report-content-reveal { to { opacity: 1; } }
@keyframes report-fog-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -2%, 0) scale(1.08); } }

@media (max-width: 760px), (max-height: 620px) {
    .report-modal {
        width: min(calc(100vw - 4px), calc((100dvh - 4px) * .75));
        height: auto;
        aspect-ratio: 543 / 724;
        padding: clamp(82px, 15dvh, 122px) clamp(38px, 10vw, 74px) clamp(72px, 12dvh, 96px);
        background-image: url("/images/reports/runestone-report-portrait.webp");
    }
    .report-modal-header { padding: 0 2px 7px; }
    .report-modal-content { padding: 7px 2px 2px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .report-modal {
        width: min(calc(100vw - 6px), calc((100dvh - 4px) * 1.5988), 900px);
        height: auto;
        aspect-ratio: 793 / 496;
        padding: 42px 76px 38px;
        background-image: url("/images/reports/runestone-report-wide.webp");
    }
    .report-modal-header h2 { font-size: .88rem; }
    .report-modal-subtitle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .report-modal-backdrop::before,
    .report-modal-backdrop::after,
    .report-modal,
    .report-modal-rune-glow,
    .report-modal-energy-pulse,
    .report-modal-header,
    .report-modal-content { animation: none !important; opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
    .movement-workspace { grid-template-columns: minmax(0, 1fr) minmax(230px, 260px); }
}

@media (max-width: 900px) {
    .movement-workspace { grid-template-columns: 1fr; }
    #movement-target { grid-template-columns: minmax(70px, 1fr) auto minmax(80px, 1fr) auto minmax(70px, 1fr); }
    .movement-target-heading,
    #movement-preview-button,
    .movement-speed-control,
    #movement-preview-message,
    #movement-preview { grid-column: 1 / -1; }
    .movement-speed-control { justify-self: start; }
    #movement-mission-selection { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #movement-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .movement-unit-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .movement-unit-card { max-width: none; }
    .movement-origin,
    #movement-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
    #movement-mission-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .movement-cargo-selection,
    #movement-preview { grid-template-columns: 1fr; }
}

@media (max-width: 380px) { .movement-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================
   FORSCHUNGSSEITE – KACHEL-/DETAILANSICHT
   ===================================================== */

#research-page > .content-kicker,
#research-page > h2 { display: none; }
#research-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.research-selection-detail,
.research-queue-panel { border: 1px solid rgba(128, 101, 58, 0.72); background: linear-gradient(135deg, rgba(18, 20, 17, 0.9), rgba(35, 30, 21, 0.78)); box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25); }
.research-loading,
.research-empty-note { margin: 0; color: #aaa08d; font-size: 0.8rem; }
.research-selection-detail > .research-loading { padding: 24px; }
.research-focus { display: grid; grid-template-columns: minmax(150px, 24%) 1fr; min-height: 250px; }
.research-focus-empty { grid-template-columns: 1fr minmax(220px, 35%); padding-left: 24px; align-items: center; }
.research-focus-empty h2,
.research-focus-title h2 { margin: 2px 0 7px; color: #dcc28d; font-size: 1.3rem; }
.research-focus-empty p:last-child { margin: 0; color: #b1a794; }
.research-focus-image,
.research-focus-atmosphere,
.research-tile-image { overflow: hidden; background: radial-gradient(circle, rgba(111, 88, 50, 0.28), transparent 55%), linear-gradient(145deg, rgba(53, 59, 51, 0.48), rgba(10, 13, 12, 0.88)); }
.research-focus-image { position: relative; isolation: isolate; }
.research-focus-image img,
.research-tile-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.research-focus-image::before,
.research-focus-image::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.research-focus-image::after { background: linear-gradient(90deg, rgba(5, 7, 6, 0.18), transparent 42%, rgba(121, 128, 190, 0.07)); }
.research-focus-image.atmosphere-smoke::before,
.research-focus-image.atmosphere-mist::before,
.research-focus-image.atmosphere-dust::before {
    inset: 42% -18% -28%;
    background: radial-gradient(ellipse at 48% 76%, rgba(210, 207, 190, 0.18), transparent 62%);
    animation: building-mist-drift 14s ease-in-out infinite alternate;
}
.research-focus-image.atmosphere-dust::before { background: radial-gradient(ellipse at 52% 78%, rgba(207, 178, 126, 0.17), transparent 60%); }
.research-focus-image.atmosphere-fire::before {
    inset: 38% 8% 0;
    background: radial-gradient(circle at 52% 82%, rgba(240, 119, 35, 0.2), transparent 48%);
    animation: building-fire-glow 5s ease-in-out infinite alternate;
}
.research-focus-image.atmosphere-runes::before {
    background: radial-gradient(circle at 50% 62%, rgba(105, 113, 255, 0.24), transparent 44%);
    animation: building-rune-pulse 7s ease-in-out infinite alternate;
}
.research-focus-image.atmosphere-ambient::before {
    background: radial-gradient(circle at 64% 68%, rgba(226, 168, 84, 0.12), transparent 45%);
    animation: building-fire-glow 9s ease-in-out infinite alternate;
}
.research-focus-image.is-placeholder,
.research-focus-atmosphere,
.research-tile-image.is-placeholder { display: grid; place-items: center; color: rgba(202, 177, 126, 0.6); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.62rem; }
.research-focus-atmosphere { align-self: stretch; min-height: 180px; border-left: 1px solid rgba(128, 101, 58, 0.48); }
.research-focus-body { min-width: 0; padding: 16px 18px; }
.research-focus-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.research-focus-level { display: grid; text-align: right; color: #aaa08d; font-size: 0.72rem; }
.research-focus-level strong { color: #e1c68e; font-size: 1rem; }
.research-description { margin: 3px 0 12px; color: #aaa18f; font-size: 0.76rem; line-height: 1.45; }
.research-focus-columns { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 16px; }
.research-focus-columns h3,
.research-section-heading h3 { margin: 0 0 7px; color: #c9b17f; font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.06em; }
.research-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.research-resource { display: grid; padding: 6px 8px; border: 1px solid rgba(109, 91, 61, 0.55); background: rgba(6, 8, 7, 0.32); }
.research-resource span,
.research-resource small,
.research-focus-columns small { color: #999080; font-size: 0.67rem; }
.research-resource strong { color: #cfc3aa; font-size: 0.84rem; }
.research-resource.is-missing strong { color: #d58d78; }
.research-duration { margin: 0 0 5px; color: #ddd0b5; font-weight: 700; }
.research-requirement { display: flex; gap: 6px; align-items: center; color: #d58d78; font-size: 0.74rem; }
.research-focus-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.research-status { color: #b6ac98; font-size: 0.72rem; }
.research-status.status-resources,
.research-status.status-locked { color: #d58d78; }
#research-start-action,
.research-compact-queue-entry button { border: 1px solid #856b3e; color: #ead6ad; background: linear-gradient(#51442d, #2d281e); padding: 7px 12px; cursor: pointer; }
#research-start-action:disabled { opacity: 0.48; cursor: not-allowed; }
.research-queue-panel { padding: 10px 12px; }
.research-section-heading .content-kicker { margin: 0 0 2px; }
.research-section-heading h3 { margin-bottom: 6px; }
.research-queue-list { display: grid; gap: 4px; }
.research-compact-queue-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 5px 7px; background: rgba(4, 6, 5, 0.32); border-top: 1px solid rgba(109, 91, 61, 0.35); }
.research-compact-queue-entry div { display: grid; }
.research-compact-queue-entry strong { color: #cbb78e; font-size: 0.76rem; }
.research-compact-queue-entry small,
.research-compact-queue-entry time { color: #aaa08d; font-size: 0.68rem; }
.research-compact-queue-entry button { padding: 3px 7px; font-size: 0.67rem; }
.research-grid-heading { margin-top: 2px; }
.research-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 8px; }
.research-tile { display: grid; grid-template-rows: 84px auto; min-width: 0; padding: 0; text-align: left; color: inherit; border: 1px solid rgba(109, 91, 61, 0.62); background: rgba(18, 19, 16, 0.86); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }

/* Landkarte V1.1 */
.map-content { display: grid; gap: 8px; }
.map-breadcrumb { display: flex; align-items: center; gap: 7px; color: #8f8779; font-size: 0.75rem; }
.map-breadcrumb button { padding: 0; color: #d2ae71; font: inherit; border: 0; background: none; cursor: pointer; }
.map-breadcrumb strong { color: #d8c293; }
.map-world { position: relative; width: min(90%, 812px); aspect-ratio: 1371 / 1148; margin: 0 auto; overflow: hidden; border: 1px solid #735d38; background-color: #07121a; background-image: url("/images/landkarte/midgard-world-map.png"); background-size: contain; background-position: center; background-repeat: no-repeat; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.46); }
.map-world figcaption { position: absolute; right: 10px; top: 8px; padding: 3px 7px; color: #d9c18e; font-size: 0.62rem; letter-spacing: 0.06em; background: rgba(5, 11, 14, 0.74); border: 1px solid rgba(157, 123, 67, 0.55); }
.map-region-markers { position: absolute; inset: 0; z-index: 2; }
.map-region-marker { position: absolute; left: var(--map-x); top: var(--map-y); width: 7%; height: 12%; min-width: 34px; min-height: 46px; padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; transform: translateX(-50%); }
.map-region-label { position: absolute; left: 50%; bottom: calc(100% + 3px); padding: 3px 7px; color: #ead39f; font-size: clamp(0.52rem, 0.8vw, 0.68rem); font-weight: 700; line-height: 1.1; white-space: nowrap; border: 1px solid #a37d42; background: rgba(16, 18, 16, 0.88); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75); transform: translateX(-50%); }
.map-region-marker:hover,
.map-region-marker:focus-visible { outline: 1px solid rgba(219, 181, 104, 0.85); outline-offset: 2px; }
.map-region-marker:hover .map-region-label,
.map-region-marker:focus-visible .map-region-label { color: #fff0c7; border-color: #dbb568; box-shadow: 0 0 18px rgba(213, 169, 83, 0.66); }
.map-navigation { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 10px; border: 1px solid rgba(109, 91, 61, 0.62); background: rgba(18, 19, 16, 0.86); }
.map-navigation label { display: grid; gap: 3px; color: #aaa08d; font-size: 0.72rem; }
.map-navigation input { width: 82px; }
#map-current-location { margin: 0; color: #d2ae71; }
.map-region-view,
.map-jarlsriki-view { display: grid; gap: 8px; }
.map-region-view[hidden],
.map-jarlsriki-view[hidden] { display: none; }
.map-level-toolbar { display: flex; width: min(90%, 1200px); margin: 0 auto; align-items: center; justify-content: space-between; gap: 12px; }
.map-region-view h3,
.map-jarlsriki-view h3 { margin: 0; color: #d2ae71; }
.map-region-canvas { position: relative; width: min(81%, 900px); aspect-ratio: 3 / 2; margin: 0 auto; overflow: hidden; border: 1px solid #80663b; background: radial-gradient(circle at center, rgba(42, 47, 38, 0.72), rgba(10, 14, 11, 0.9)); background-color: #121711; background-size: contain; background-position: center; background-repeat: no-repeat; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); }
.map-jarlsriki-markers { position: absolute; inset: 0; z-index: 2; }
.map-jarlsriki-marker { position: absolute; left: var(--map-x); top: var(--map-y); display: grid; place-items: center; width: clamp(17px, 2.25vw, 25px); aspect-ratio: 1; padding: 0; color: #d7c79f; border: 1px solid rgba(157, 126, 75, 0.78); border-radius: 50%; background: rgba(14, 19, 15, 0.76); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); cursor: pointer; transform: translate(-50%, -50%); }
.map-jarlsriki-number { font-size: clamp(0.45rem, 0.72vw, 0.62rem); line-height: 1; }
.map-jarlsriki-tooltip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 5px); display: none; min-width: max-content; padding: 3px 6px; color: #ead7af; font-size: 0.59rem; font-weight: 400; white-space: nowrap; border: 1px solid rgba(160, 126, 70, 0.8); background: rgba(8, 12, 9, 0.94); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65); transform: translateX(-50%); pointer-events: none; }
.map-jarlsriki-marker:hover .map-jarlsriki-tooltip,
.map-jarlsriki-marker:focus-visible .map-jarlsriki-tooltip { display: block; }
.map-jarlsriki-marker.is-own-jarlsriki { color: #f0d69a; border-color: #d4ad61; box-shadow: 0 0 9px rgba(211, 167, 78, 0.72); }
.map-jarlsriki-marker:hover,
.map-jarlsriki-marker:focus-visible { z-index: 4; color: #f0d9a7; border-color: #d2a95f; background: rgba(61, 49, 31, 0.94); box-shadow: 0 0 9px rgba(211, 166, 78, 0.48); outline: none; }
.map-jarlsriki { position: relative; width: min(90%, 1200px); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border: 1px solid #80663b; background: #111511; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); }
.map-background-layer { position: absolute; inset: 0; z-index: 0; background-color: #151a15; background-image: url("/images/landkarte/city-map.png"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.map-positions { position: absolute; inset: 0; z-index: 2; }
.map-marker { position: absolute; left: var(--map-x); top: var(--map-y); display: grid; justify-items: center; min-width: 82px; padding: 0; color: #bfb5a2; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); z-index: 2; }
.map-marker-symbol { display: grid; place-items: center; width: 40px; height: 40px; color: #d6b979; font-size: 1.18rem; border: 2px solid #917345; background: radial-gradient(circle, #433923, #17150f 72%); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.map-marker-label { max-width: 130px; margin-top: 6px; overflow: hidden; color: #d7c6a4; font-size: 0.72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 3px #000; }
.map-marker-label:empty { display: none; }
.map-marker small { color: #a99d89; font-size: 0.62rem; text-shadow: 0 2px 3px #000; }
.map-marker.is-free .map-marker-symbol { color: #918873; border-style: dashed; background: rgba(19, 23, 18, 0.86); }
.map-marker.is-own-city .map-marker-symbol { color: #bce3a9; border-color: #72a06b; box-shadow: 0 0 14px rgba(92, 160, 84, 0.55); }
.map-marker.development-settlement .map-marker-symbol { width: 32px; height: 32px; font-size: .92rem; }
.map-marker.development-village .map-marker-symbol { width: 36px; height: 36px; }
.map-marker.development-developed .map-marker-symbol { width: 40px; height: 40px; border-width: 2px; }
.map-marker.development-city .map-marker-symbol { width: 46px; height: 46px; font-size: 1.32rem; border-color: #b28a4d; }
.map-marker.development-fortified .map-marker-symbol { width: 52px; height: 52px; font-size: 1.48rem; border-width: 3px; border-color: #c7a05b; box-shadow: 0 0 15px rgba(198, 152, 72, .5), 0 4px 12px rgba(0,0,0,.8); }
.map-marker:hover .map-marker-symbol,
.map-marker:focus-visible .map-marker-symbol,
.map-marker.is-selected .map-marker-symbol { border-color: #e0bd74; box-shadow: 0 0 18px rgba(220, 174, 89, 0.7); transform: scale(1.12); }
.map-marker.is-focused .map-marker-symbol { animation: map-focus-pulse 1.25s ease-in-out infinite alternate; }
.map-battlefield-marker { position: absolute; left: calc(var(--map-x) + 25px); top: calc(var(--map-y) - 25px); z-index: 4; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #f0c879; font-size: 1rem; border: 1px solid #b56b3a; border-radius: 50%; background: radial-gradient(circle, #5b291d, #17100d 72%); box-shadow: 0 0 12px rgba(190, 75, 35, 0.65); cursor: pointer; transform: translate(-50%, -50%); }
.map-battlefield-marker:hover,.map-battlefield-marker:focus-visible { border-color: #ffd58a; box-shadow: 0 0 18px rgba(235, 126, 55, 0.85); }
.map-salvage-message { flex-basis: 100%; margin: 5px 0 0; color: #e6ad91; }
.thingbund-shell{display:grid;gap:6px;max-width:980px;margin:0 auto;color:#d8ccb4}.thingbund-shell h2,.thingbund-shell h3,.thingbund-shell p{margin-top:0}.thingbund-head,.thingbund-outsider-head{display:flex;align-items:end;justify-content:space-between;gap:9px;padding:6px 10px;border:1px solid rgba(118,93,57,.66);box-shadow:inset 0 1px rgba(220,190,130,.08);background:linear-gradient(110deg,rgba(25,21,16,.82),rgba(54,42,27,.58))}.thingbund-outsider-head p:last-child{max-width:590px;margin-bottom:2px;font-size:.76rem}.thingbund-head h2,.thingbund-outsider-head h2{margin:0;font-size:1.22rem;line-height:1.15}.thingbund-head .content-kicker,.thingbund-outsider-head .content-kicker{margin-bottom:1px;font-size:.65rem}.thingbund-head-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}.thingbund-head-facts span,.thingbund-resource-strip span{padding:2px 5px;border:1px solid rgba(137,107,63,.4);background:rgba(8,10,8,.36);font-size:.68rem}.thingbund-tabs{display:flex;flex-wrap:wrap;gap:3px;padding:3px;border:1px solid rgba(92,72,44,.72);box-shadow:inset 0 1px rgba(198,162,99,.08);background:linear-gradient(#241f17,#171713)}.thingbund-tabs button{min-height:27px;padding:3px 9px;border:1px solid #58482e;border-radius:1px;box-shadow:inset 0 1px rgba(222,190,128,.08),0 1px 2px #090806;background:linear-gradient(#3a3122,#211d16);color:#cdbc99;font-size:.72rem;letter-spacing:.025em;cursor:pointer}.thingbund-tabs button:hover{border-color:#89704a;background:linear-gradient(#493a26,#2b2419)}.thingbund-tabs button.is-active{border-color:#aa8850;box-shadow:inset 0 0 0 1px rgba(223,183,105,.18),0 1px 3px #080705;background:linear-gradient(#654d2c,#342717);color:#fff0c9}.thingbund-tab-content{display:grid;gap:6px}.thingbund-visual{position:relative;box-sizing:border-box;justify-self:center;width:min(72%,720px);height:136px;padding:10px;overflow:hidden;border:3px solid #1a1814;outline:1px solid #565046;box-shadow:0 7px 14px rgba(0,0,0,.58),0 0 0 3px #29241c,0 0 0 6px #12110f,inset 0 0 0 3px #070706,inset 0 0 16px 7px rgba(0,0,0,.88);background:repeating-linear-gradient(90deg,#201a13 0 9px,#392b1d 10px 15px,#18140f 16px 21px)}.thingbund-visual::before,.thingbund-visual::after{content:"ᛞ";position:absolute;z-index:3;display:grid;place-items:center;width:22px;height:22px;border:2px solid #252522;box-shadow:inset 0 0 0 2px #0b0c0b,0 1px 3px #000;background:radial-gradient(circle at 38% 32%,#78776d,#2b2c29 48%,#0f100f 78%);color:#171713;font-size:.75rem;text-shadow:0 1px rgba(170,163,142,.18);pointer-events:none}.thingbund-visual::before{left:1px;top:1px}.thingbund-visual::after{right:1px;bottom:1px;transform:rotate(180deg)}.thingbund-visual img{display:block;width:100%;height:100%;border:2px solid #080806;box-shadow:inset 0 0 20px #000;object-fit:cover;object-position:center}.thingbund-founding .thingbund-visual img{object-position:center 48%}.thingbund-hall-state+.thingbund-visual img{object-position:center}.thingbund-panel,.thingbund-form,.thingbund-notice{padding:7px 9px;border:1px solid rgba(125,97,57,.48);box-shadow:inset 0 1px rgba(209,172,108,.06);background:rgba(24,20,15,.67)}.thingbund-panel>h3,.thingbund-form>h3{margin:0 0 4px;font-size:.88rem}.thingbund-form{display:grid;grid-template-columns:minmax(180px,2fr) minmax(90px,1fr);align-items:end;gap:4px 6px}.thingbund-founding>.thingbund-form{justify-self:center;width:min(100%,580px)}.thingbund-form label{display:grid;gap:2px;min-width:0;font-size:.69rem}.thingbund-form input,.thingbund-form textarea{box-sizing:border-box;width:100%;min-width:0;padding:4px 6px;font-size:.76rem}.thingbund-form textarea{min-height:46px;max-height:92px;resize:vertical}.thingbund-form>h3,.thingbund-form label:has(textarea){grid-column:1/-1}.thingbund-form>button{justify-self:start;min-height:27px;padding:3px 8px;font-size:.72rem}.thingbund-stats{display:grid;grid-template-columns:max-content 1fr max-content 1fr;gap:2px 8px;margin:0;font-size:.74rem}.thingbund-stats dt{color:#a9956f}.thingbund-stats dd{margin:0}.thingbund-hall-state{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);gap:5px 8px}.thingbund-hall-state>h3,.thingbund-hall-state>.thingbund-notice,.thingbund-hall-state>.thingbund-upgrade-grid,.thingbund-hall-state>.thingbund-form,.thingbund-hall-state>.thingbund-muted,.thingbund-hall-state>.thingbund-donors{grid-column:1/-1}.thingbund-resource-strip{display:flex;flex-wrap:wrap;align-content:start;gap:3px;margin:0}.thingbund-bonus,.thingbund-muted{margin-bottom:2px;color:#a99f8b;font-size:.7rem}.thingbund-upgrade-grid,.thingbund-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:4px}.thingbund-upgrade,.thingbund-list-card{display:grid;align-content:start;gap:3px;min-width:0;padding:5px 6px;border:1px solid rgba(130,99,57,.32);background:rgba(255,255,255,.02);font-size:.72rem}.thingbund-upgrade p,.thingbund-list-card p{margin:0}.thingbund-level{color:#d1ad69;font-size:.68rem}.thingbund-donation{margin-top:3px;grid-template-columns:repeat(4,minmax(65px,1fr)) auto}.thingbund-donation>h3{grid-column:1/-1}.thingbund-members{display:grid}.thingbund-member,.thingbund-compact-row{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:4px 2px;border-bottom:1px solid rgba(169,130,73,.18);font-size:.74rem}.thingbund-member-main{display:grid;grid-template-columns:minmax(110px,1fr) minmax(75px,.5fr);gap:1px 8px}.thingbund-member-main small{grid-column:1/-1;color:#958b78}.thingbund-member-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}.thingbund-member-actions button,.thingbund-compact-row button,.thingbund-board-post button{padding:3px 6px;font-size:.67rem}.thingbund-board-form{grid-template-columns:1fr auto}.thingbund-board{display:grid;gap:4px;max-height:330px;margin-top:5px;overflow:auto}.thingbund-board-post{display:grid;gap:2px;padding:5px 7px;border-left:3px solid #725735;background:rgba(255,255,255,.022);font-size:.74rem}.thingbund-board-post small{color:#9e927f}.thingbund-board-post p{margin:1px 0;white-space:pre-wrap;overflow-wrap:anywhere}.thingbund-search-results,.thingbund-card-details{display:grid;gap:3px}.thingbund-apply{grid-template-columns:1fr}.thingbund-danger,.thingbund-danger-zone button{border-color:#8e4236;color:#efb2a2}.thingbund-danger-zone{border-color:rgba(142,66,54,.62);background:rgba(65,22,18,.22)}.thingbund-message{min-height:.8em;margin:0;color:#d5bf91;font-size:.7rem}.thingbund-message.is-error{color:#e6ad91}.thingbund-donors{margin-top:3px}.thingbund-donors p{display:inline-block;margin:1px 9px 1px 0;font-size:.7rem}
@media(max-width:700px){.thingbund-shell{gap:5px}.thingbund-head,.thingbund-outsider-head{align-items:flex-start;flex-direction:column;padding:5px 7px}.thingbund-head-facts{justify-content:flex-start}.thingbund-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.thingbund-tabs button{width:100%}.thingbund-form,.thingbund-donation,.thingbund-board-form,.thingbund-hall-state{grid-template-columns:1fr}.thingbund-form>h3,.thingbund-form label:has(textarea),.thingbund-hall-state>*{grid-column:auto}.thingbund-stats{grid-template-columns:max-content 1fr}.thingbund-member,.thingbund-compact-row{align-items:flex-start;flex-direction:column}.thingbund-member-actions{justify-content:flex-start}.thingbund-visual{width:calc(100% - 14px);height:108px;padding:7px;border-width:2px;box-shadow:0 5px 10px rgba(0,0,0,.55),0 0 0 2px #29241c,0 0 0 4px #12110f,inset 0 0 0 2px #070706,inset 0 0 10px 4px rgba(0,0,0,.86)}.thingbund-visual::before,.thingbund-visual::after{width:16px;height:16px;font-size:.55rem}.thingbund-board{max-height:270px}}
@keyframes map-focus-pulse { from { box-shadow: 0 0 8px rgba(228, 190, 109, 0.55); } to { box-shadow: 0 0 25px rgba(228, 190, 109, 1); } }
.map-info-panel { position: absolute; right: 14px; bottom: 14px; z-index: 6; width: min(330px, calc(100% - 28px)); padding: 14px; color: #bdb19d; border: 1px solid #907246; background: linear-gradient(145deg, rgba(31, 29, 23, 0.97), rgba(10, 13, 11, 0.97)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.72); }
.map-info-panel[hidden] { display: none; }
.map-info-panel h3 { margin: 2px 28px 9px 0; color: #dec58f; font-size: 1.05rem; }
.map-info-panel p { display: flex; justify-content: space-between; gap: 10px; margin: 5px 0; font-size: 0.74rem; }
.map-info-panel p span { color: #8f8779; }
.map-info-panel p strong { color: #cfc3ac; text-align: right; }
.map-info-kicker { color: #9e7c49; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.11em; }
.map-info-close { position: absolute; top: 7px; right: 9px; padding: 2px 6px; color: #b9aa91; font-size: 1.2rem; border: 0; background: none; cursor: pointer; }
.map-position-actions { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; }
.map-action { padding: 5px 8px; color: #ddc99f; border: 1px solid #6d5b3d; background: linear-gradient(#3a3021, #211d16); cursor: pointer; }
.map-action:hover { border-color: #b08b50; background: linear-gradient(#4a3b27, #292219); }
.map-action-danger { color: #e5b1a4; border-color: #865044; }
.ranking-player-link { padding: 0; color: #d2ae71; font: inherit; text-decoration: underline; border: 0; background: none; cursor: pointer; }
@media (max-width: 700px) {
    .map-world,
    .map-region-canvas,
    .map-jarlsriki,
    .map-level-toolbar { width: 100%; }
    .map-region-canvas { width: 90%; }
    .map-navigation > button { flex: 1 1 auto; }
    .map-region-label { padding: 2px 4px; font-size: 0.52rem; }
    .map-jarlsriki-marker { width: clamp(14px, 3.2vw, 20px); }
    .map-jarlsriki-number { font-size: clamp(0.4rem, 1.7vw, 0.55rem); }
    .map-marker { min-width: 64px; }
    .map-marker-label { max-width: 82px; font-size: 0.63rem; }
    .map-marker small { font-size: 0.56rem; }
    .map-info-panel { right: 8px; bottom: 8px; width: calc(100% - 16px); }
}

/* 100 Ziele bleiben auf schmalen Touchscreens als eigene Kartenfläche bedienbar. */
@media (max-width: 600px) {
    .map-region-view { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .map-region-view .map-region-canvas { width: 700px; max-width: none; margin-left: 0; }
    .map-jarlsriki-marker { width: 24px; }
    .map-jarlsriki-number { font-size: .58rem; }
}

/* Verhältnis-Fallback für ältere Tablet-Browser/WebViews ohne aspect-ratio.
   Die absolut positionierten Kartenlayer erhalten dadurch weiterhin Höhe. */
@supports not (aspect-ratio: 1 / 1) {
    .map-world,
    .map-region-canvas,
    .map-jarlsriki {
        height: 0;
    }

    .map-world { padding-top: 83.735%; }
    .map-region-canvas { padding-top: 66.667%; }
    .map-jarlsriki { padding-top: 56.25%; }
}
.research-tile:hover { border-color: #a0844f; }
.research-tile.is-selected { border-color: #d0ae69; box-shadow: inset 0 0 0 1px rgba(208, 174, 105, 0.45); background: rgba(53, 43, 27, 0.9); }
.research-tile.status-locked,
.research-tile.status-queue-full { opacity: 0.66; }
.research-tile-copy { display: grid; gap: 1px; padding: 7px 8px; }
.research-tile-copy strong { overflow: hidden; color: #d4bd8e; font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.research-tile-copy span { color: #c5bba8; font-size: 0.72rem; }
.research-tile-copy small { color: #918979; font-size: 0.63rem; }
.research-tile.status-resources small,
.research-tile.status-locked small { color: #c88875; }
.research-tile.status-queued small { color: #d6b66f; }

@media (max-width: 1050px) {
    .research-focus-columns { grid-template-columns: 1fr 1fr; }
    .research-focus-columns > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .research-focus,
    .research-focus-empty { grid-template-columns: 1fr; padding-left: 0; }
    .research-focus-empty > div:first-child { padding: 18px; }
    .research-focus-image,
    .research-focus-atmosphere { min-height: 120px; max-height: 160px; }
    .research-focus-columns { grid-template-columns: 1fr; }
    .research-focus-columns > :last-child { grid-column: auto; }
    .research-compact-queue-entry { grid-template-columns: 1fr auto; }
    .research-compact-queue-entry time { grid-column: 1; }
    .research-compact-queue-entry button { grid-column: 2; grid-row: 1 / span 2; }
}

/* =====================================================
   KOMMANDOZENTRALE
   ===================================================== */

#overview-page { min-width: 0; }
#overview-page > h2 { display: none; }
#overview-page .city-scene-placeholder { display: none; }
#overview-page > #game-welcome,
#overview-page > .city-overview-grid,
#overview-page > .overview-status-grid { display: none; }
.command-welcome,
#overview-page > #game-welcome { margin: 8px 0; color: #aaa18f; font-size: 0.78rem; }

.command-city-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, 1fr);
    min-height: 280px;
    overflow: hidden;
    border: 1px solid rgba(128, 101, 58, 0.72);
    background: linear-gradient(135deg, rgba(18, 20, 17, 0.76), rgba(35, 30, 21, 0.7));
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.28);
}
.command-city-visual {
    display: grid;
    place-items: center;
    min-height: 260px;
    overflow: hidden;
    color: rgba(206, 180, 128, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    background: radial-gradient(circle at 50% 65%, rgba(123, 96, 53, 0.28), transparent 42%), linear-gradient(155deg, rgba(50, 58, 52, 0.38), rgba(8, 12, 11, 0.72));
    border-right: 1px solid rgba(128, 101, 58, 0.5);
}
.command-city-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: center;
}
.command-city-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px; }
.command-city-info h2 { margin: 2px 0 5px; color: #ddc38e; font-size: 1.35rem; overflow-wrap: anywhere; }
.command-city-info > p:not(.content-kicker) { margin: 0 0 14px; color: #aea38f; font-size: 0.8rem; }
.command-city-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.command-city-resources > div { display: grid; grid-template-columns: 1fr auto; gap: 1px 7px; padding: 6px 7px; border: 1px solid rgba(109, 91, 61, 0.48); background: rgba(5, 7, 6, 0.3); }
.command-city-resources span { color: #a49a88; font-size: 0.68rem; }
.command-city-resources strong { color: #dac495; font-size: 0.78rem; }
.command-city-resources small { grid-column: 1 / -1; color: #91a482; font-size: 0.63rem; }
.command-city-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.command-city-facts > div { display: grid; padding: 5px 7px; border-top: 1px solid rgba(109, 91, 61, 0.45); }
.command-city-facts span { color: #999080; font-size: 0.64rem; }
.command-city-facts strong { color: #d1bd94; font-size: 0.75rem; }
.command-rename-button { align-self: flex-start; padding: 7px 11px; border: 1px solid #856b3e; color: #ead6ad; background: linear-gradient(#51442d, #2d281e); cursor: pointer; }
.treasury-content { display: grid; gap: 22px; }
.premium-balance { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #80663c; background: rgba(53,45,30,.72); }
.premium-balance span, .premium-card span { color: #aaa08d; }
.premium-balance strong { color: #e2c681; font-size: 1.15rem; }
.premium-grid, .premium-jarl-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; }
.premium-jarl-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.premium-card { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(128,101,58,.7); background: rgba(25,26,21,.86); }
.premium-card header { display: flex; justify-content: space-between; gap: 8px; }
.premium-card p { margin: 0; color: #b8ae9c; font-size: .78rem; line-height: 1.45; }
.premium-card button { padding: 7px; border: 1px solid #76603d; color: #e2d1ae; background: #403722; cursor: pointer; }
.premium-duration-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.premium-duration-actions button { flex: 1; min-width: 100px; font-size: .7rem; }
.premium-card .is-active { color: #83b98b; }
.premium-message { min-height: 18px; margin: 0; color: #a8c28e; }
.premium-message.is-error { color: #d9958c; }
.premium-sandbox-notice { margin:0 0 12px; padding:7px 9px; border:1px solid rgba(197,151,72,.65); color:#e2c681; background:rgba(70,48,18,.58); font-size:.76rem; }
.premium-rune-chamber { position:relative; isolation:isolate; min-width:0; padding:18px; overflow:hidden; border:1px solid rgba(79,76,137,.68); background:radial-gradient(ellipse at 50% 110%,rgba(66,42,115,.36),transparent 70%),radial-gradient(circle at 8% 2%,rgba(42,95,152,.25),transparent 37%),linear-gradient(145deg,#080b14,#171322 55%,#080b13); box-shadow:inset 0 0 30px rgba(11,7,28,.85); }
.premium-rune-chamber::before { content:'ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ ᚷ ᚹ ᛉ ᛟ'; position:absolute; inset:8px 12px auto; z-index:-1; color:rgba(117,131,230,.25); text-align:center; letter-spacing:clamp(.4rem,2vw,1.8rem); font-size:clamp(1.2rem,3vw,2.2rem); white-space:nowrap; text-shadow:0 0 15px rgba(69,90,212,.6); pointer-events:none; animation:premium-rune-breathe 8s ease-in-out infinite alternate; }
.premium-rune-chamber::after { content:'ᛟ ᛉ ᚷ ᚱ ᚨ ᚦ ᚢ ᚠ'; position:absolute; inset:auto 0 0; z-index:-1; color:rgba(90,71,149,.2); text-align:center; letter-spacing:clamp(.45rem,3vw,2rem); font-size:clamp(1rem,2.4vw,1.9rem); white-space:nowrap; pointer-events:none; }
.premium-rune-chamber h3 { position:relative; margin:0 0 15px; color:#d7c9ed; text-shadow:0 0 10px #47459e; }
.premium-rune-chamber .premium-grid { position:relative; z-index:1; }
.premium-rune-chamber .premium-card { background:rgba(11,12,23,.92); border-color:rgba(92,94,157,.7); box-shadow:inset 0 0 14px rgba(57,48,116,.23),0 4px 10px rgba(0,0,0,.3); }
.premium-rune-chamber .premium-card strong { color:#dbcafa; }
.premium-jarl-art { display:block; width:100%; height:clamp(120px,12vw,158px); object-fit:cover; object-position:center 42%; border:1px solid rgba(159,128,75,.48); }
.premium-jarl { min-width:0; align-content:start; background:linear-gradient(160deg,rgba(29,28,30,.94),rgba(17,18,22,.93)); }
.premium-jarl header { min-width:0; flex-wrap:wrap; align-content:start; }
.premium-jarl header strong { color:#e4c58d; line-height:1.25; }
.premium-jarl header span { white-space:normal; }
.premium-jarl .premium-duration-actions { margin-top:auto; }
@keyframes premium-rune-breathe { to { opacity:.58; text-shadow:0 0 7px rgba(69,90,212,.36); } }
@media (max-width:760px) { .premium-rune-chamber { padding:12px; } .premium-rune-chamber::before,.premium-rune-chamber::after { letter-spacing:.45rem; } .premium-jarl-art { height:140px; } }
@media (max-width:420px) { .premium-grid,.premium-jarl-grid { grid-template-columns:minmax(0,1fr); } .premium-rune-chamber::before,.premium-rune-chamber::after { font-size:1rem; } }
@media (prefers-reduced-motion:reduce) { .premium-rune-chamber::before { animation:none; } }
.resource-merchant{min-width:0;padding:18px;border:1px solid rgba(133,99,50,.8);background:radial-gradient(circle at 50% 0,rgba(123,86,37,.18),transparent 45%),linear-gradient(145deg,rgba(20,18,14,.96),rgba(35,29,20,.96));box-shadow:inset 0 0 25px rgba(0,0,0,.55)}
.resource-merchant>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.resource-merchant h3,.resource-merchant h4{margin:0;color:#e0c899}.resource-merchant header p,.merchant-note{margin:5px 0 0;color:#aaa08d;font-size:.8rem}.merchant-tariff{display:grid;justify-items:end;color:#a99b84;font-size:.72rem;white-space:nowrap}.merchant-tariff strong{color:#e4d5b8;font-size:1rem}.merchant-tariff span{margin-top:4px;padding:2px 8px;border:1px solid #7e653c;color:#ddc28d;background:#342918}.resource-merchant-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.resource-merchant-card{display:grid;grid-template-columns:64px 1fr;gap:7px 10px;min-width:0;padding:12px;border:1px solid rgba(117,91,50,.75);background:rgba(18,18,15,.88)}.resource-merchant-card>img{grid-row:1/3;width:64px;height:64px;object-fit:contain}.resource-merchant-card dl{grid-column:1/-1;display:grid;gap:4px;margin:0}.resource-merchant-card dl div{display:flex;justify-content:space-between;gap:7px;font-size:.72rem}.resource-merchant-card dt{color:#948b79}.resource-merchant-card dd{margin:0;color:#d6c7aa;text-align:right}.resource-merchant-card small{grid-column:1/-1;color:#9d937f}.resource-merchant-card>strong{grid-column:1/-1;color:#e4c47f}.resource-merchant button,.resource-merchant-dialog button{min-height:36px;border:1px solid #7c6339;color:#ebd8af;background:#45371f;cursor:pointer}.resource-merchant-card>button{grid-column:1/-1}.resource-merchant button:disabled{opacity:.45;cursor:not-allowed}.merchant-meter{grid-column:1/-1;height:7px;overflow:hidden;border:1px solid #4b463b;background:#12120f}.merchant-meter span{display:block;height:100%;background:linear-gradient(90deg,#6f4924,#c7a45e)}.resource-merchant-package{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:12px;padding:16px;border:1px solid #a27b3f;background:linear-gradient(120deg,rgba(58,42,21,.88),rgba(24,22,17,.94));box-shadow:inset 0 0 18px rgba(168,112,38,.13)}.merchant-package-resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;grid-column:1/-1}.merchant-package-resources span{display:flex;align-items:center;gap:6px;min-width:0;color:#c8b896;font-size:.75rem}.merchant-package-resources img{width:30px;height:30px;object-fit:contain}.merchant-package-price{display:grid;gap:3px;color:#a99b84;font-size:.76rem}.merchant-package-price strong{color:#e7c781;font-size:1.05rem}.resource-merchant-package>button{min-width:190px}.resource-merchant-dialog{width:min(480px,calc(100vw - 28px));padding:0;border:1px solid #997642;color:#daceb6;background:#191711;box-shadow:0 15px 60px #000}.resource-merchant-dialog::backdrop{background:rgba(0,0,0,.72)}.resource-merchant-dialog form{position:relative;padding:20px}.merchant-dialog-close{position:absolute;top:7px;right:7px;width:32px;min-height:32px}.resource-merchant-dialog h3{padding-right:35px}.resource-merchant-dialog #merchant-dialog-details>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(130,105,65,.25)}.merchant-confirm-price{margin-top:14px}.merchant-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.merchant-dialog-actions button{padding:6px 12px}
@media(max-width:1050px){.resource-merchant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.merchant-package-resources{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.resource-merchant{padding:12px}.resource-merchant>header{display:grid}.merchant-tariff{justify-items:start}.resource-merchant-grid{grid-template-columns:minmax(0,1fr)}.resource-merchant-package{grid-template-columns:minmax(0,1fr)}.merchant-package-resources{grid-template-columns:minmax(0,1fr)}.resource-merchant-package>button{min-width:0;width:100%}}
.command-city-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.command-abandon-button { padding: 5px 8px; border: 1px solid #77433d; color: #cfa8a1; background: rgba(65, 31, 28, 0.72); font-size: 0.7rem; cursor: pointer; }
.command-abandon-button:hover { color: #efd0ca; background: rgba(91, 39, 34, 0.9); }

.game-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(3, 5, 5, 0.82); backdrop-filter: blur(2px); }
.game-dialog-backdrop[hidden] { display: none; }
.game-dialog { width: min(520px, 100%); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior-y: contain; border: 1px solid #7e633c; background: linear-gradient(145deg, #25231d, #121513); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.72), inset 0 0 30px rgba(0, 0, 0, 0.22); color: #ded1b9; }
.game-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(133, 107, 62, 0.55); }
.game-dialog-header h2 { margin: 2px 0 0; color: #e0c58d; }
.game-dialog-close { border: 0; color: #aaa08f; background: transparent; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.game-dialog-close:hover { color: #ead6ad; }
.game-dialog-content { display: grid; gap: 16px; padding: 20px; }
.city-abandon-target { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-left: 3px solid #856b3e; background: rgba(72, 58, 36, 0.28); }
.city-abandon-target strong { color: #ead6ad; font-size: 1.05rem; }
.city-abandon-target span { color: #a99e8b; font-size: 0.76rem; }
.city-abandon-warning { margin: 0; padding: 11px 12px; border: 1px solid rgba(136, 57, 49, 0.72); color: #e3b7af; background: rgba(91, 34, 29, 0.3); line-height: 1.5; }
.city-abandon-confirmation { display: grid; gap: 7px; color: #c9bda8; font-size: 0.8rem; }
.city-abandon-confirmation input { padding: 9px 10px; border: 1px solid #705c3d; outline: none; color: #f0e5d0; background: rgba(7, 10, 9, 0.88); }
.city-abandon-confirmation input:focus { border-color: #b08b50; box-shadow: 0 0 0 2px rgba(176, 139, 80, 0.15); }
.city-abandon-error { margin: 0; color: #e0a097; font-size: 0.78rem; }
.game-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.game-dialog-cancel, .game-dialog-danger { padding: 8px 11px; border: 1px solid #665a46; color: #d9ccb6; background: #302d25; cursor: pointer; }
.game-dialog-danger { border-color: #8e443c; color: #f0c6bf; background: #632e29; }
.game-dialog-danger:disabled { cursor: not-allowed; opacity: 0.45; }
.game-dialog-danger:hover:not(:disabled) { background: #7a3730; }
.building-production-preview-dialog { display: flex; flex-direction: column; width: min(680px, 100%); max-height: min(82dvh, 720px); }
.building-production-preview-content { flex: 1 1 auto; min-height: 0; padding: 12px 18px 18px; overflow-y: auto; overscroll-behavior: contain; }
.building-production-preview-table { display: grid; border: 1px solid rgba(109, 91, 61, 0.55); }
.building-production-preview-row { display: grid; grid-template-columns: 90px minmax(170px, 1fr) minmax(150px, .8fr); gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(109, 91, 61, 0.38); color: #c8bda7; font-size: .76rem; }
.building-production-preview-row:last-child { border-bottom: 0; }
.building-production-preview-row.is-heading { color: #cbb17e; background: rgba(49, 42, 29, .72); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.building-production-preview-row.is-current { color: #e3ce9e; background: rgba(83, 66, 36, .3); }
.building-production-preview-row > :nth-child(n+2) { text-align: right; }
@media (max-width: 560px) {
    .building-production-preview-row { grid-template-columns: 70px minmax(120px, 1fr) minmax(110px, .8fr); gap: 6px; padding: 7px; font-size: .68rem; }
    .building-production-preview-content { overflow-x: auto; }
    .building-production-preview-table { min-width: 410px; }
}

/* =====================================================
   RANGLISTE
   ===================================================== */

.ranking-content {
    min-width: 0;
}

.ranking-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ranking-panel {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid rgba(109, 91, 61, 0.62);
    background: rgba(16, 18, 15, 0.82);
}

.ranking-panel h2 {
    margin: 0;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(109, 91, 61, 0.5);
    color: #cbb17e;
    background: rgba(31, 28, 21, 0.7);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ranking-table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(109, 91, 61, 0.38);
    text-align: left;
}

.ranking-table th {
    color: #bca574;
    background: rgba(49, 42, 29, 0.72);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ranking-table td {
    color: #c8bda7;
    font-size: 0.8rem;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
    width: 80px;
    text-align: center;
}

.ranking-table th:last-child,
.ranking-table td:last-child {
    text-align: right;
}

.ranking-table tbody tr:last-child td {
    border-bottom: 0;
}

.ranking-table tbody tr.is-own-player td {
    color: #ead19c;
    background: rgba(104, 78, 37, 0.36);
}

.ranking-empty {
    margin: 0;
    padding: 14px;
    color: #9e9585;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .ranking-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

#overview-page .city-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
#overview-page .overview-card { min-height: auto; padding: 9px 11px; background: rgba(17, 19, 16, 0.78); }
#overview-page .overview-card h3 { margin-bottom: 3px; font-size: 0.7rem; }
#overview-page .overview-card strong { font-size: 0.95rem; }
#overview-page .overview-status-grid { grid-template-columns: 1.2fr 0.8fr; gap: 9px; margin-top: 0; }
#overview-page .construction-overview,
#overview-page .production-overview,
.command-queue-card { padding: 10px 12px; border: 1px solid rgba(109, 91, 61, 0.58); background: rgba(16, 18, 15, 0.8); }
#overview-page .production-overview { grid-column: 1 / -1; }
#overview-page .construction-overview > h2,
#overview-page .production-overview > h2,
.command-queue-card h3 { margin: 0 0 7px; color: #cbb17e; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; }
#overview-page .construction-queue,
.command-queue-list { display: grid; gap: 4px; }
.command-queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.command-queue-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 8px; border-top: 1px solid rgba(109, 91, 61, 0.34); background: rgba(5, 7, 6, 0.3); }
.command-queue-entry div { display: grid; min-width: 0; }
.command-queue-entry strong { color: #d0bc91; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-queue-entry small,
.command-queue-entry span,
.command-queue-entry time { color: #9e9585; font-size: 0.66rem; }
.command-queue-entry time { grid-column: 2; color: #d4bc89; text-align: right; }
.command-queue-empty { margin: 0; color: #958c7d; font-size: 0.73rem; }
.command-queue-more { margin: 3px 0 0; color: #bda676; font-size: 0.67rem; }
#overview-page .production-overview-list { gap: 0; }
#overview-page .production-overview-row { padding: 5px 2px; }

@media (max-width: 1050px) {
    .command-city-panel { grid-template-columns: minmax(0, 1.05fr) minmax(210px, 1fr); }
    .command-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .command-city-panel { grid-template-columns: 1fr; }
    .command-city-visual { min-height: 180px; border-right: 0; border-bottom: 1px solid rgba(128, 101, 58, 0.5); }
    #overview-page .city-overview-grid,
    #overview-page .overview-status-grid,
    .command-queue-grid { grid-template-columns: 1fr; }
}

.midgard-timeline-viewport {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.midgard-timeline-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 65%;
}

.midgard-timeline-track {
    position: absolute;
    inset: 0 11.7% 0 11.5%;
    pointer-events: none;
}

.midgard-time-marker {
    height: 100%;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 5%, #f1d493 24%, #d89a3f 78%, transparent 96%);
    box-shadow: 0 0 5px rgba(225, 174, 82, 0.9);
}

.midgard-time-marker::after {
    content: "◆";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    color: #f0cb7c;
    font-size: 10px;
    text-shadow: 0 0 4px #000;
}

.midgard-time-label {
    position: absolute;
    left: 50%;
    top: 3px;
    transform: translateX(-50%);
    padding: 1px 4px;
    color: #f1d9a8;
    background: rgba(7, 9, 9, 0.82);
    border: 1px solid rgba(190, 145, 76, 0.7);
    border-radius: 2px;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* =====================================================
   WIKI / TECHNOLOGIEBAUM
   ===================================================== */

.wiki-content { margin-top: 14px; }

.wiki-intro {
    margin: 0 0 14px;
    padding: 10px 12px;
    color: #c8baa2;
    background: rgba(18, 18, 15, 0.7);
    border: 1px solid rgba(151, 124, 79, 0.45);
    border-radius: 4px;
    line-height: 1.45;
}

.wiki-message { color: #c9a56b; }
.wiki-category { margin-bottom: 22px; }

.wiki-category > h3 {
    margin: 0 0 10px;
    padding-bottom: 6px;
    color: #d7bb86;
    border-bottom: 1px solid #685536;
}

.wiki-group { margin-bottom: 14px; }

.wiki-group-title {
    margin: 0 0 7px;
    color: #aaa08e;
    font-size: 0.82rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wiki-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wiki-tech-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    background: linear-gradient(145deg, rgba(47, 43, 35, 0.94), rgba(22, 22, 18, 0.97));
    border: 1px solid rgba(136, 111, 70, 0.55);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.wiki-tech-icon {
    width: 74px;
    height: 74px;
    position: relative;
    background:
        linear-gradient(135deg, transparent 48%, rgba(151, 124, 79, 0.18) 49%, rgba(151, 124, 79, 0.18) 51%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(151, 124, 79, 0.18) 49%, rgba(151, 124, 79, 0.18) 51%, transparent 52%),
        #171713;
    border: 1px solid #6e5938;
    border-radius: 3px;
    overflow: hidden;
}

.wiki-tech-icon::after {
    content: "BILD";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6f6555;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
}

.wiki-tech-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.wiki-tech-icon.has-image::after { display: none; }

.wiki-tech-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.wiki-tech-content h4 { margin: 0; color: #ead9ba; font-size: 0.98rem; }

.wiki-function-block {
    margin: 0 0 9px;
    padding: 7px 9px;
    border-left: 2px solid #80683f;
    background: rgba(128, 104, 63, 0.1);
}
.wiki-function-block h5 { margin: 0 0 3px; color: #bd9b64; font-size: 0.73rem; }
.wiki-function-block p { margin: 0; color: #c5baa8; font-size: 0.72rem; line-height: 1.4; }
.wiki-entry-description { margin: 0 0 7px; color: #cfc2aa; font-size: .73rem; line-height: 1.42; }

.wiki-effect-info {
    position: relative;
    flex: 0 0 auto;
}

.wiki-effect-button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #80683f;
    border-radius: 50%;
    color: #d7bd86;
    background: #29251d;
    font: 700 0.72rem/1 serif;
    cursor: pointer;
}

.wiki-effect-button:hover,
.wiki-effect-button:focus-visible,
.wiki-effect-button[aria-expanded="true"] {
    border-color: #c49b58;
    color: #f0d7a4;
    outline: none;
}

.wiki-effect-tooltip {
    width: min(280px, 70vw);
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    padding: 8px 9px;
    border: 1px solid #80683f;
    border-radius: 3px;
    color: #d7cbb4;
    background: #171713;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
}

.wiki-effect-info:hover .wiki-effect-tooltip {
    display: block;
}

.wiki-effect-tooltip[hidden] {
    display: none;
}

.wiki-dependencies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.wiki-dependency-block h5 { margin: 0 0 3px; color: #bd9b64; font-size: 0.73rem; }

.wiki-dependency-block ul {
    margin: 0;
    padding-left: 15px;
    color: #c5baa8;
    font-size: 0.72rem;
    line-height: 1.35;
}

.wiki-dependency-block li + li { margin-top: 2px; }
.wiki-dependency-empty { margin: 0; color: #756d60; font-size: 0.71rem; font-style: italic; }

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

@media (max-width: 600px) {
    .wiki-tech-card { grid-template-columns: 56px minmax(0, 1fr); }
    .wiki-tech-icon { width: 56px; height: 56px; }
    .wiki-dependencies { grid-template-columns: 1fr; }
}


/* =====================================================
   38. MITTLERE BILDSCHIRME
   ===================================================== */

@media (max-width: 1200px) {

    .game-layout {
        grid-template-columns:
            150px minmax(0, 1fr) 170px;
    }

    .overview-status-grid {
        grid-template-columns:
            minmax(320px, 1.3fr)
            minmax(190px, 0.7fr);

        gap: 18px;
    }

    .game-logo {
        font-size: 1.2rem;
    }

    .resource-bar {
        grid-template-columns:
            repeat(6, minmax(78px, 1fr));
    }

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


/* =====================================================
   39. TABLET
   ===================================================== */

@media (max-width: 1000px) {

    .game-layout {
        grid-template-columns:
            140px minmax(0, 1fr) 155px;
    }

    .game-header {
        gap: 10px;

        padding:
            7px 10px;
    }

    .game-logo {
        font-size: 1.05rem;
    }

    .resource-item {
        padding:
            4px 4px;
    }

    .resource-item strong {
        font-size: 0.78rem;
    }

    .resource-storage-value,
    .resource-storage-separator {
        font-size: 0.7rem;
    }

    main.game-content {
        padding: 9px;
    }

    .game-navigation {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .map-content,
    .map-world,
    .map-region-canvas,
    .map-jarlsriki {
        min-width: 0;
        max-width: 100%;
    }

    #game-content-window {
        padding: 11px;
    }

    .overview-status-grid {
        grid-template-columns:
            1fr;

        gap: 15px;
    }

    .production-overview {
        max-width: 420px;
    }

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


/* Tablet-Portrait benötigt die volle Inhaltsbreite statt drei enger Spalten. */
@media (min-width: 761px) and (max-width: 850px) {
    body.game-body { display: block; height: auto; min-height: 100dvh; overflow: visible; }
    .game-layout { display: block; overflow: visible; }
    .game-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; height: auto; max-height: 42dvh; overflow-x: hidden; overflow-y: auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 1px solid #57482f; }
    .navigation-title { grid-column: 1 / -1; }
    .navigation-button { margin: 0; text-align: center; }
    main.game-content { width: 100%; overflow: visible; }
    .city-sidebar { height: auto; max-height: 42dvh; overflow-y: auto; border-left: 0; border-top: 1px solid #57482f; }
}

/* =====================================================
   40. HANDY
   ===================================================== */

@media (max-width: 760px) {

    body:not(.game-body) > header {
        padding-top: 45px;
    }

    body:not(.game-body) > header h1 {
        letter-spacing: 0.06em;
    }

    body:not(.game-body) > header p {
        font-size: 0.95rem;

        line-height: 1.5;
    }

    #login-area,
    #register-form-area {
        padding:
            28px 22px
            30px 22px;
    }


    /* SPIEL */

    body.game-body {
        display: block;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .game-header {
        position: relative;

        display: block;
    }

    .game-logo {
        margin-bottom: 8px;

        text-align: center;
    }

    .resource-bar {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .resource-gold {
        grid-column: auto;
    }

    .game-layout {
        display: block;
        overflow: visible;
    }

    .game-navigation {
        height: auto;
        max-height: 42vh;
        max-height: 42dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 4px;

        border-right: 0;

        border-bottom:
            1px solid #57482f;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .navigation-title {
        grid-column:
            1 / -1;

        margin-bottom: 4px;
    }

    .navigation-button {
        margin: 0;

        text-align: center;
    }

    main.game-content {
        width: 100%;

        padding: 7px;
        overflow: visible;
    }

    #game-content-window {
        width: 100%;

        padding: 10px;
    }

    .content-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .game-page-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .city-overview-grid {
        grid-template-columns:
            1fr;

        gap: 5px;
    }

    .overview-card {
        padding: 8px;
    }

    .overview-status-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .construction-entry {
        grid-template-columns:
            24px minmax(0, 1fr);

        min-height: 40px;
    }

    .construction-time {
        grid-column: 2;

        margin-top: 2px;
    }

    .production-overview {
        max-width: none;
    }

    .city-scene-placeholder {
        min-height: 190px;

        padding: 15px;
    }

    .game-grid,
    .game-grid-two,
    .game-grid-three,
    .game-grid-four {
        grid-template-columns:
            1fr;
    }

    .game-form-row {
        grid-template-columns:
            1fr;

        gap: 4px;
    }

    .game-list-entry {
        align-items: flex-start;

        flex-direction: column;
    }

    .city-sidebar {
        height: auto;
        max-height: 42vh;
        max-height: 42dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;

        border-left: 0;

        border-top:
            1px solid #57482f;
    }

    .city-sidebar-title {
        text-align: left;
    }

    .midgard-timeline {
        height: 44px;
        min-height: 44px;
    }
}
/* =====================================================
   DIE REISE DES DRACHENBLUTS
   ===================================================== */

.dragon-journey-shell {
    min-width: 0;
    max-width: 1480px;
    margin-inline: auto;
}

.dragon-journey-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.dragon-journey-header h2 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 2.8vw, 2.65rem);
    font-weight: 900;
    letter-spacing: .095em;
    line-height: 1.08;
    color: #e7b469;
    background: linear-gradient(180deg, #ffe5a1 4%, #edaa55 32%, #a93625 69%, #f88a40 92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px #050304) drop-shadow(0 0 10px rgba(183, 45, 18, .4));
    animation: dragon-title-ember 6s ease-in-out infinite alternate;
}
.blood-market-shell h2 {
    margin: 0;
    color: #e5c17c;
}
@keyframes dragon-title-ember { to { filter: drop-shadow(0 2px 2px #050304) drop-shadow(0 0 15px rgba(220, 75, 26, .58)); } }

.dragon-journey-summary {
    color: #d8c7aa;
    text-align: right;
}

.dragon-journey-frame {
    position: relative;
    isolation: isolate;
    padding: 26px 30px 26px 82px;
    overflow: hidden;
    border: 4px ridge #6b5435;
    border-radius: 20px 28px 14px 24px;
    background:
        radial-gradient(circle at 5% 28%, rgba(196, 55, 27, .25), transparent 35%),
        radial-gradient(circle at 95% 88%, rgba(77, 39, 137, .2), transparent 36%),
        repeating-linear-gradient(115deg, transparent 0 28px, rgba(220, 151, 65, .018) 29px 30px),
        linear-gradient(140deg, #070b14 0%, #20141a 48%, #090c14 100%);
    box-shadow: inset 0 0 0 3px #17141b, inset 0 0 0 8px rgba(180, 104, 48, .28), inset 0 0 56px #000, 0 14px 30px rgba(0, 0, 0, .7), 0 0 26px rgba(147, 39, 24, .25);
}
.dragon-journey-frame::before { content:""; position:absolute; inset:10px; border:1px solid rgba(205,147,75,.3); border-radius:14px 22px 9px 18px; pointer-events:none; }
.dragon-frame-runes { position:absolute; z-index:1; right:15px; top:24px; writing-mode:vertical-rl; letter-spacing:.8em; color:#a499eb; text-shadow:0 0 8px #6955e6,0 0 16px #5035b2; opacity:.78; pointer-events:none; animation:dragon-rune-glow 5s ease-in-out infinite alternate; }
@keyframes dragon-rune-glow { to { opacity:.48; text-shadow:0 0 4px #6955e6; } }

.dragon-tutorial-guidance { position: relative; z-index: 3; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #a77e3d; border-radius: 7px; background: rgba(39,28,16,.96); color: #ecd5a4; text-align: center; }

@media (prefers-reduced-motion: reduce) { .tutorial-bubble { animation: none; } }

.dragon-frame-fire {
    position: absolute;
    z-index: 0;
    bottom: 8px;
    width: 54px;
    height: 68px;
    opacity: 0.7;
    border-radius: 48% 52% 46% 54%;
    background: radial-gradient(ellipse at 50% 78%, #ffe069 0 15%, #e66618 35%, rgba(115, 19, 5, 0.15) 68%, transparent 72%);
    filter: blur(1px) drop-shadow(0 0 9px #ce4312);
    animation: dragon-fire-flicker 1.15s ease-in-out infinite alternate;
    pointer-events: none;
}

.dragon-frame-fire-left { left: 5px; }
.dragon-frame-fire-right { right: 5px; animation-delay: -0.55s; }

@keyframes dragon-fire-flicker {
    from { transform: scale(0.88, 0.95) skewX(-3deg); opacity: 0.55; }
    to { transform: scale(1.08, 1.04) skewX(4deg); opacity: 0.86; }
}

.dragon-journey-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(330px, 1.45fr) minmax(260px, 0.75fr);
    gap: 18px;
}

.dragon-route-panel {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    border: 2px solid rgba(196, 141, 68, .72);
    border-radius: 12px;
    background:#0b1017;
    box-shadow: inset 0 0 38px rgba(0, 0, 0, .83), 0 0 0 3px rgba(12, 9, 13, .9), 0 0 20px rgba(170, 62, 27, .18);
}
.dragon-route-background { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; pointer-events:none; }
.dragon-route-panel::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(3,6,12,.22),transparent 25% 75%,rgba(3,6,12,.28)),linear-gradient(180deg,rgba(3,6,12,.24),transparent 20% 78%,rgba(3,6,12,.32)); box-shadow:inset 0 0 35px 12px rgba(0,0,0,.55); }

.dragon-route-lines,
.dragon-route-points {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dragon-route-lines { z-index:2; pointer-events:none; }
.dragon-route-points { z-index:3; pointer-events:none; }
.dragon-route-point { pointer-events:auto; }

.dragon-route-lines polyline {
    fill: none;
    stroke: rgba(255, 215, 132, .95);
    stroke-width: 1.1;
    stroke-dasharray: 1.8 1.2;
    vector-effect: non-scaling-stroke;
    filter:drop-shadow(0 0 3px #100700);
}

.dragon-route-point {
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid #94713d;
    border-radius: 50%;
    color: #b6aa96;
    background: #1c1a1c;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow:0 1px 6px #050408,0 0 0 2px rgba(9,7,10,.78);
}

.dragon-route-point.completed { color: #b7db9c; border-color: #648454; background: #1f3322; }
.dragon-route-point.completed:not(:disabled) { cursor: pointer; }
.dragon-route-point.current { color: #fff2c7; border-color: #f0b74d; background: #7f3618; box-shadow: 0 0 14px #e56b20; cursor: pointer; }
.dragon-route-point.boss { width: 35px; height: 35px; border-radius: 6px; color: #ffca7a; border-color: #ca5f35; }
.dragon-route-point:disabled { cursor: default; opacity: 0.62; }
.dragon-route-point.current:disabled { opacity: 1; }

.dragon-mission-panel,
.blood-market-shell {
    padding: 16px;
    border: 1px solid rgba(159, 124, 70, 0.52);
    border-radius: 8px;
    background: rgba(17, 15, 13, 0.88);
}

.blood-market-header,.blood-market-balances{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.blood-market-balances{justify-content:flex-end;flex-wrap:wrap}.blood-market-balances span{padding:.36rem .6rem;border:1px solid rgba(155,38,38,.7);background:rgba(20,8,8,.72);border-radius:.35rem}.blood-market-message{min-height:1.2em;color:#e9c87d}.blood-market-shell>section>h3{margin:.72rem 0 .42rem;color:#d6b46f}.blood-market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .7rem}.blood-offer-pair>h4{margin:0 0 .35rem;color:#d9bd83;text-transform:uppercase;font-size:.84rem;letter-spacing:.08em}.blood-offer-pair-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:.32rem}.blood-offer-card{display:grid;grid-template-columns:34% minmax(0,1fr);overflow:hidden;border:1px solid rgba(116,36,32,.75);border-radius:.4rem;background:linear-gradient(180deg,rgba(37,24,21,.96),rgba(15,11,10,.97));box-shadow:0 4px 12px rgba(0,0,0,.35);text-align:left}.blood-offer-card.premium{border-color:rgba(151,63,71,.95);box-shadow:0 0 11px rgba(130,25,42,.24)}.blood-offer-card img{display:block;width:100%;height:100%;min-height:118px;object-fit:cover}.blood-offer-body{display:flex;flex-direction:column;padding:.5rem}.blood-offer-body h4{margin:0 0 .22rem;font-size:.88rem;line-height:1.18}.blood-offer-status{flex:1;min-height:2.15em;margin:.16rem 0;color:#bdb2a4;font-size:.75rem;line-height:1.25}.blood-offer-price{margin:.3rem 0;color:#efc87c;font-size:.84rem;font-weight:700}.blood-offer-body button{width:100%;min-height:32px;padding:.3rem .45rem}.blood-offer-body button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.blood-market-grid{grid-template-columns:1fr}}@media(max-width:600px){.blood-market-header{align-items:flex-start;flex-direction:column}.blood-offer-card{grid-template-columns:31% minmax(0,1fr)}.blood-offer-card img{min-height:112px}.blood-offer-status{min-height:auto}}

.dragon-mission-panel h3 { margin: 4px 0 10px; color: #e3bd78; }
.dragon-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 10px; }
.dragon-stat-grid div { padding: 6px; text-align: center; background: rgba(102, 77, 43, 0.2); }
.dragon-stat-grid dt { color: #a99b84; font-size: 0.68rem; }
.dragon-stat-grid dd { margin: 2px 0 0; font-weight: 700; }
.dragon-reward-line { color: #b9d68c; }
.dragon-loss-warning { color: #e78e7a; font-size: 0.82rem; }
.dragon-army-units { display: grid; gap: 5px; max-height: 290px; overflow-y: auto; }
.dragon-army-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px; align-items: center; gap: 8px; font-size: 0.8rem; }
.dragon-army-row.is-locked { color: #8e8576; }
.dragon-army-row input { width: 100%; box-sizing: border-box; }
.dragon-army-available { display: inline; padding: 0; border: 0; background: none; color: #d7bb82; font: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.dragon-army-available:hover, .dragon-army-available:focus-visible { color: #f2d69d; outline-offset: 2px; }
.dragon-army-available:disabled { color: inherit; text-decoration: none; cursor: default; }
.dragon-battle-result { min-height: 2.5em; margin-top: 10px; color: #dec99e; }
.dragon-cinematic-overlay { position:fixed; z-index:1900; inset:0; display:grid; place-items:center; padding:clamp(10px,3vw,38px); background:rgba(2,3,5,.94); backdrop-filter:blur(2px); }
.dragon-cinematic-stage { position:relative; width:min(1120px,96vw); aspect-ratio:16/9; overflow:hidden; border:2px solid #795936; border-radius:5px; background:#030405; box-shadow:0 0 0 7px #111317,0 24px 80px #000,0 0 35px rgba(139,73,46,.28); }
.dragon-cinematic-stage::before { position:absolute; z-index:2; inset:0; content:""; pointer-events:none; border:1px solid rgba(221,169,96,.24); box-shadow:inset 0 0 42px #000; }
.dragon-cinematic-stage video { display:block; width:100%; height:100%; object-fit:cover; background:#030405; }
.dragon-cinematic-actions { position:absolute; z-index:3; right:14px; bottom:14px; display:flex; gap:9px; }
.dragon-cinematic-actions button { min-height:40px; padding:8px 15px; color:#f1dfbd; border:1px solid #a77b43; border-radius:3px; background:rgba(24,20,17,.9); box-shadow:0 4px 13px #0009; font:inherit; font-weight:700; cursor:pointer; }
.dragon-cinematic-actions button:hover,.dragon-cinematic-actions button:focus-visible { border-color:#e3b96d; background:#3b2d22; outline:2px solid rgba(221,167,91,.4); outline-offset:2px; }
body.dragon-cinematic-open { overflow:hidden; }
@media(max-width:650px){.dragon-cinematic-overlay{padding:4px}.dragon-cinematic-stage{width:100vw;border-radius:0}.dragon-cinematic-actions{right:8px;bottom:8px}.dragon-cinematic-actions button{min-height:44px;padding:7px 11px}}
.blood-market-shell { max-width: 1120px; margin: 0 auto; text-align: center; }

@media (max-width: 900px) {
    .dragon-journey-frame { padding: 18px 22px 18px 48px; }
    .dragon-frame-runes { right:8px; font-size:.72rem; }
    .dragon-journey-layout { grid-template-columns: 1fr; }
    .dragon-route-panel { min-height: 560px; }
}

@media (max-width: 600px) {
    .dragon-journey-header { align-items: start; flex-direction: column; }
    .dragon-journey-summary { text-align: left; }
    .dragon-journey-frame { padding: 12px; }
    .dragon-frame-runes { display:none; }
    .dragon-frame-fire { opacity:.3; }
    .dragon-route-panel { min-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
    .dragon-frame-fire,.dragon-frame-runes,.dragon-journey-header h2 { animation: none; }
}
/* Drachenreise V2: Bildflächen sind das Objekt; HTML bleibt nur Interaktion/Layers. */
.dragon-journey-shell { max-width: 1660px; }
.dragon-journey-header { position:relative; min-height:235px; align-items:center; margin-bottom:-14px; z-index:3; }
.dragon-title-group { position:relative; width:min(46%,492px); min-height:220px; margin-inline:auto; display:flex; align-items:center; justify-content:center; }
.dragon-journey-header h2 { width:100%; margin:0; line-height:0; filter:none; animation:none; }
.dragon-journey-header h2 img { display:block; width:100%; height:auto; filter:drop-shadow(0 8px 13px #070506); }
.dragon-journey-summary { position:absolute; bottom:0; left:2%; right:2%; text-align:center; font-size:.86rem; text-shadow:0 2px 5px #050407; }
.dragon-journey-frame { overflow:visible; padding:clamp(36px,5vw,72px) clamp(28px,4vw,62px) clamp(40px,6vw,86px); border:0; border-radius:0; background:#0b0c13 url('/images/dragon-journey/relic-frame-v2.png') center / 100% 100% no-repeat; box-shadow:0 20px 42px rgba(0,0,0,.65); }
.dragon-journey-frame::before { display:none; }
.dragon-frame-runes,.dragon-frame-fire { z-index:3; }
.dragon-journey-layout { grid-template-columns:minmax(0, 1.82fr) minmax(270px,.78fr); gap:clamp(16px,2vw,32px); z-index:2; }
.dragon-route-panel { min-height:0; aspect-ratio: 1.24; border:0; border-radius:2% 4% 3% 5%; background:#17131b; box-shadow:0 0 0 4px rgba(15,11,12,.8),0 10px 24px #070609; }
.dragon-route-background { z-index:0; opacity:1; }
.dragon-route-panel::after { background:radial-gradient(ellipse at center,transparent 52%,rgba(4,3,7,.28) 100%); box-shadow:inset 0 0 22px rgba(0,0,0,.4); }
.dragon-route-lines polyline { stroke:#e7ae68; stroke-width:1.45; stroke-dasharray:1.6 1.8; filter:drop-shadow(0 0 3px #ef612e) drop-shadow(0 1px 2px #130807); }
.dragon-route-point { background:radial-gradient(circle at 35% 28%,#5b4937,#251b1b 68%,#0c0b11); border:2px solid #aa824d; box-shadow:0 0 0 2px #171018,0 2px 7px #050407; }
.dragon-route-point.current { background:radial-gradient(circle,#f29c4d,#8b301a 68%,#2b0b12); box-shadow:0 0 15px #e15a21,0 0 0 2px #1d1013; }
.dragon-route-point.boss { transform:translate(-50%,-50%) rotate(45deg); border-radius:5px; background:#6b2723; }
.dragon-route-point.boss::first-letter { transform:rotate(-45deg); }
.dragon-mission-panel { min-width:0; padding:clamp(12px,2vw,26px); border:0; border-radius:0; background:transparent; box-shadow:none; color:#e8d8be; text-shadow:0 1px 2px #050407; }
.dragon-mission-panel h3 { color:#f2c985; text-transform:uppercase; letter-spacing:.08em; }
.dragon-mission-panel .content-kicker { color:#bca5e4; }
.dragon-stat-grid div { background:rgba(6,5,9,.26); border-bottom:1px solid rgba(210,154,76,.34); }
.dragon-stat-grid dt::before { content:'ᚦ'; display:block; color:#d6a652; font-size:1rem; line-height:1.1; }
.dragon-stat-grid div:nth-child(2) dt::before { content:'ᛉ'; color:#a99ade; }
.dragon-stat-grid div:nth-child(3) dt::before { content:'ᛟ'; color:#d87b59; }
.dragon-army-units { max-height:300px; scrollbar-width:thin; scrollbar-color:#765532 transparent; }
.dragon-army-row { border-bottom:1px solid rgba(207,157,96,.18); padding-block:3px; }
.dragon-army-row input { min-height:34px; padding:4px 8px; color:#f9e4bc; border:1px solid #8d6b46; border-radius:3px; background:rgba(5,7,13,.86); box-shadow:inset 0 1px 7px #050407; font:inherit; }
.dragon-army-row input:focus-visible { outline:2px solid #e9af69; outline-offset:2px; }
.dragon-mission-panel button.primary-action { border:1px solid #b7874e; background:linear-gradient(180deg,#66331e,#251315); color:#f6ddb1; box-shadow:inset 0 1px 2px #ce8f4b,0 3px 9px #060507; }
@media (max-width:900px) {
    .dragon-journey-header { min-height:175px; }
    .dragon-title-group { width:min(45%,408px); min-height:165px; }
    .dragon-journey-frame { padding:clamp(30px,6vw,58px); }
    .dragon-journey-layout { grid-template-columns:1fr; }
    .dragon-route-panel { aspect-ratio:1.45; min-height:0; }
    .dragon-mission-panel { background:rgba(12,11,16,.54); }
}
@media (max-width:600px) {
    .dragon-journey-header { min-height:145px; margin-bottom:0; }
    .dragon-title-group { width:min(60%,288px); min-height:135px; }
    .dragon-journey-summary { bottom:-3px; font-size:.69rem; line-height:1.3; }
    .dragon-journey-frame { padding:24px 18px 34px; background-size:cover; }
    .dragon-journey-layout { gap:16px; }
    .dragon-route-panel { min-height:470px; aspect-ratio:auto; }
    .dragon-route-point { width:27px; height:27px; font-size:.62rem; }
    .dragon-mission-panel { padding:14px; }
    .dragon-frame-runes,.dragon-frame-fire { display:none; }
}
.support-shell{width:100%;max-width:760px;margin:auto}.support-shell form,.support-shell label{display:grid;gap:.45rem}.support-shell form{gap:1rem}.support-shell input,.support-shell select,.support-shell textarea{box-sizing:border-box;width:100%;min-width:0}.support-shell select{min-height:2.35rem;padding:.45rem .6rem}.support-identity{padding:.8rem;margin-bottom:1rem;border:1px solid rgba(196,151,74,.45)}
.support-tabs{display:flex;gap:.45rem;margin-bottom:1rem;border-bottom:1px solid rgba(196,151,74,.45);padding-bottom:.55rem}.support-tabs button{padding:.55rem .9rem}.support-tabs button.is-active{border-color:#d7aa54;background:rgba(128,94,38,.22)}.support-unread-count,.support-unread-badge{display:inline-block;margin-left:.35rem;padding:.12rem .42rem;border:1px solid #e0b85d;border-radius:999px;background:#7e321f;color:#fff4cf;font-size:.72rem;font-weight:700}.support-tab-panel[hidden]{display:none}.support-own{display:grid;gap:.7rem}.support-own-heading{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.support-own-heading h3{margin:0}#support-tickets-message{min-height:1.2em;margin:0;color:#d58d78}#support-ticket-list{display:grid;gap:.4rem}.support-ticket-button{display:grid;gap:.28rem;padding:.7rem;text-align:left}.support-ticket-button.is-unread{border:2px solid #e0b85d;background:rgba(126,50,31,.2)}.support-ticket-meta{font-size:.78rem;color:#c8b891}#support-ticket-detail{display:grid;gap:.8rem;padding:1rem;border:1px solid rgba(196,151,74,.45);background:rgba(16,18,16,.78)}.support-conversation{display:grid;gap:.65rem;max-height:430px;overflow:auto;padding:.4rem}.support-conversation-message{display:grid;gap:.25rem;padding:.75rem;border-left:3px solid #80683f;background:rgba(255,255,255,.035)}.support-conversation-message.is-admin{border-color:#b9924e;background:rgba(128,94,38,.13)}.support-conversation-message time{font-size:.75rem;color:#aaa}.support-conversation-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.support-reply-form{display:grid!important;grid-template-columns:1fr auto;align-items:end}.support-reply-form button{min-height:2.5rem}@media(max-width:650px){.support-tabs{flex-wrap:wrap}.support-tabs button{flex:1 1 180px}.support-own-heading{align-items:stretch;flex-direction:column}.support-reply-form{grid-template-columns:1fr}}

/* SPIELEREINSTELLUNGEN */
.settings-shell{display:grid;gap:12px;max-width:980px;margin:0 auto}.settings-shell>h2{margin:0;color:#dcc28d}.settings-tabs{display:flex;flex-wrap:wrap;gap:5px;border-bottom:1px solid rgba(128,101,58,.72);padding-bottom:7px}.settings-tabs button,.settings-panel button{border:1px solid #856b3e;color:#ead6ad;background:linear-gradient(#51442d,#2d281e);padding:7px 12px;cursor:pointer}.settings-tabs button.is-active{border-color:#d0ae69;background:#5a4629}.settings-message{min-height:1.2em;margin:0;color:#a7b994}.settings-message.is-error{color:#d58d78}.settings-panel{display:grid;gap:12px;padding:16px 18px;border:1px solid rgba(128,101,58,.72);background:linear-gradient(135deg,rgba(18,20,17,.9),rgba(35,30,21,.78))}.settings-panel[hidden]{display:none}.settings-panel h3,.settings-panel p{margin:0}.settings-panel form,.settings-panel label{display:grid;gap:5px}.settings-panel form{grid-template-columns:minmax(180px,1fr) auto;align-items:end}.settings-panel input{min-width:0;padding:7px;border:1px solid #6d5a38;color:#e5d5b4;background:#141713}.settings-state{width:max-content;padding:5px 9px;border:1px solid}.settings-state.active{color:#d7bd86}.settings-state.inactive{color:#a7b994}.settings-panel dl{display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;margin:0}.settings-panel dd{margin:0;color:#d5c7aa}.settings-info{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid #80683f;border-radius:50%;font-size:.7rem;cursor:help}.settings-background-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.settings-background-card{display:grid;gap:8px;padding:8px;border:1px solid rgba(109,91,61,.62);background:rgba(18,19,16,.86)}.settings-background-card>img{width:100%;height:110px;object-fit:cover}.settings-background-card>label{display:flex;align-items:center}.settings-time-row{display:grid;grid-template-columns:1fr 1fr 72px;gap:5px}.settings-days{display:flex;flex-wrap:wrap;gap:5px}.settings-days label{display:flex;align-items:center;font-size:.7rem}.settings-card-actions{display:flex;justify-content:flex-end;gap:6px}.settings-switch{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}
.game-layout{grid-template-columns:165px minmax(0,1fr) 220px}
.city-list-entry{padding:2px}.city-select-button{min-height:30px;position:relative;gap:1px;padding:2px 4px}.city-list-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;line-height:1.15}.city-list-position{font-size:.62rem;line-height:1.1}.capital-marker{position:absolute;top:3px;right:4px;margin:0;color:#c7a464;font-size:.52rem;line-height:1}.city-list-entry.active-city{box-shadow:inset 2px 0 0 #b18c52}#city-list{gap:3px}
.youtube-radio-column{width:100%;min-width:0;margin-top:9px;padding-top:8px;border-top:1px solid rgba(151,124,79,.45)}
.youtube-radio-heading{margin-bottom:7px;color:#c9a56b;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-align:center;text-transform:uppercase}.youtube-radio-status{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 2px 5px;color:#cdb27b;font-size:.7rem}.youtube-radio-status span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.youtube-radio-sound-toggle{width:100%;padding:6px 8px;border:1px solid #745c36;border-radius:3px;background:rgba(66,53,33,.55);color:#e0c995;font-size:.7rem;cursor:pointer}.youtube-radio-sound-toggle:hover{background:rgba(91,70,40,.72)}.youtube-radio-column.is-error #youtube-radio-player{display:none}#youtube-radio-player,#youtube-radio-player iframe{display:block;width:200px;height:200px}
@media(min-width:1001px) and (max-width:1200px){.game-layout{grid-template-columns:150px minmax(0,1fr) 220px}}
@media(min-width:851px) and (max-width:1000px){.game-layout{grid-template-columns:140px minmax(0,1fr) 220px}}
@media(max-width:850px){.settings-panel form{grid-template-columns:1fr}.settings-time-row{grid-template-columns:1fr 1fr}.settings-time-row>:last-child{grid-column:1/-1}.youtube-radio-column{width:200px;margin:9px auto 0}}

/* Letzte Kaskadenstufe der Runenstein-Gravur; überschreibt bewusst ältere Berichtsthemen. */
.report-modal-stone-veil {
    position: absolute;
    inset: -6%;
    z-index: 1;
    pointer-events: none;
    opacity: .055;
    background: url("/images/reports/runestone-red-veil.png") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    filter: blur(1px) saturate(.72);
    animation: report-veil-front-drift 17s ease-in-out infinite alternate;
}
.report-modal-header h2,
.report-modal-content :is(h3, h4, h5) {
    color: #c9c0af;
    text-shadow: 1px 1px 0 rgba(255,255,255,.16), -1px -1px 0 #050606, 0 2px 2px rgba(0,0,0,.9), 0 0 10px rgba(var(--report-accent),.13);
}
.report-modal-content :is(p, dt, dd, th, td, strong, span, blockquote) {
    color: #bcb4a5;
    text-shadow: 1px 1px 0 rgba(255,255,255,.13), -1px -1px 0 rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.78);
}
.report-modal-content .combat-header > strong,
.report-modal-content .combat-result > h4,
.report-modal-content .message-report-outcome,
.report-modal-content .expedition-report-result {
    color: #c7a17f;
    text-shadow: 1px 1px 0 rgba(255,255,255,.11), -1px -1px 0 #140504, 0 0 8px rgba(var(--report-ember),.3);
}
@media (prefers-reduced-motion: reduce) {
    .report-modal-stone-veil { animation: none !important; opacity: .04; transform: none; }
}

/* Runenstein V3: assetbasierte Safe Area und vollständig responsive Inschriften. */
.report-modal {
    box-sizing: border-box;
    padding: 18.5% 15.5% 15.5%;
}
.report-modal-header,
.report-modal-content,
.report-modal-content * { box-sizing: border-box; min-width: 0; }
.report-modal-header { gap: clamp(8px, 1.2vw, 14px); }
.report-modal-header > div { min-width: 0; }
.report-modal-kicker,
.report-modal-header h2,
.report-modal-subtitle,
.report-modal-content :is(h3, h4, h5, p, dt, dd, th, td, strong, span, blockquote, a, button) {
    overflow-wrap: anywhere;
    word-break: normal;
}
.report-modal-content {
    width: 100%;
    overflow-x: hidden;
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 10px), transparent 100%);
    padding: 10px 6px 12px;
}
.report-modal-content > :is(.combat-report, .scout-report, .expedition-report, .message-game-report) { width: 100%; max-width: 100%; }
.report-modal-content .combat-table-scroll { width: 100%; max-width: 100%; overflow-x: hidden; }
.report-modal-content :is(.combat-table, .message-report-table) { width: 100%; min-width: 0; table-layout: fixed; }
.report-modal-content :is(.combat-table, .message-report-table) :is(th, td) { min-width: 0; white-space: normal; }

.combat-meta-inscriptions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px clamp(12px, 3vw, 28px);
    margin: 7px 0 0;
}
.combat-meta-inscriptions > div { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 5px; align-items: baseline; }
.combat-meta-inscriptions dt { color: #77746c; font-size: .6rem; letter-spacing: .045em; text-transform: uppercase; }
.combat-meta-inscriptions dd { margin: 0; color: #a9a397; font-size: .68rem; line-height: 1.35; }

.combat-unit-inscriptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
    gap: 8px 14px;
    width: 100%;
}
.combat-unit-inscription { min-width: 0; padding: 3px 5px 6px; }
.combat-unit-inscription h5 { margin: 0 0 4px; text-align: center; font-size: .68rem; }
.combat-unit-inscription dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin: 0; }
.combat-unit-inscription dt,
.combat-unit-inscription dd { margin: 0; font-size: .63rem; line-height: 1.3; }
.combat-unit-inscription dd { text-align: right; font-variant-numeric: tabular-nums; }
.combat-unit-inscription dt:nth-of-type(4),
.combat-unit-inscription dd:nth-of-type(4) {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(4, 5, 6, .48);
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.report-modal-content :is(.combat-table, .message-report-table) tr + tr :is(th, td) { border-top: 0 !important; }
.report-modal-content :is(.combat-table, .message-report-table) tbody tr:nth-child(4) :is(th, td) {
    border-top: 1px solid rgba(4,5,6,.48) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}

/* Die Vertiefung entsteht primär aus dunkler Schriftfläche und schmaler Steinkante. */
.report-modal-kicker,
.report-modal-subtitle,
.report-modal-content :is(p, dt, dd, th, td, strong, span, blockquote) {
    color: #99968e;
    text-shadow: -1px -1px 0 rgba(0,0,0,.98), 1px 1px 0 rgba(202,201,191,.16), 0 2px 1px rgba(0,0,0,.48);
}
.report-modal-header h2,
.report-modal-content :is(h3, h4, h5) {
    color: #a9a69d;
    text-shadow: -1px -1px 0 #020303, 1px 1px 0 rgba(224,220,207,.2), 0 2px 2px rgba(0,0,0,.7), 0 0 2px rgba(var(--report-accent),.14);
}
.report-modal-content .combat-header > strong,
.report-modal-content .combat-result > h4,
.report-modal-content .message-report-outcome,
.report-modal-content .expedition-report-result {
    color: #a88f7e;
    text-shadow: -1px -1px 0 #120303, 1px 1px 0 rgba(222,190,167,.16), 0 0 5px rgba(var(--report-ember),.2);
}
.report-modal-rune-glow { box-shadow: inset 0 0 30px rgba(var(--report-accent),.3), 0 0 32px rgba(var(--report-accent),.2); }
.report-modal-veil-rear { opacity: .27; }
.report-modal-veil-edge { opacity: .18; }
.report-modal-stone-veil { opacity: .06; }

@media (max-width: 900px) and (min-width: 761px) and (min-height: 621px) {
    .report-modal { padding: 18.5% 16% 15.5%; }
    .combat-round-sides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px), (max-height: 620px) {
    .report-modal { padding: 31% 17% 19%; }
    .report-modal-header { padding: 0 0 7px; }
    .report-modal-content { padding: 9px 1px 10px; }
    .combat-meta-inscriptions { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .combat-meta-inscriptions > div { grid-template-columns: minmax(58px, auto) minmax(0, 1fr); }
    .combat-unit-inscriptions { grid-template-columns: minmax(0, 1fr); }
    .report-modal-content .combat-round-table thead,
    .report-modal-content .combat-round-table tr:first-child { display: none; }
    .report-modal-content .combat-round-table,
    .report-modal-content .combat-round-table tbody,
    .report-modal-content .combat-round-table tr,
    .report-modal-content .combat-round-table td { display: block; width: 100%; }
    .report-modal-content .combat-round-table tr { padding: 5px 2px; }
    .report-modal-content .combat-round-table tr + tr { border-top: 1px solid rgba(4,5,6,.48); }
    .report-modal-content .combat-round-table td { display: grid; grid-template-columns: minmax(76px, .8fr) minmax(0, 1.2fr); gap: 7px; padding: 2px 3px; text-align: right; }
    .report-modal-content .combat-round-table td::before { content: attr(data-label); color: #77746c; text-align: left; font-size: .58rem; text-transform: uppercase; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .report-modal { padding: 18.5% 15.5% 15.5%; }
    .combat-meta-inscriptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .combat-unit-inscriptions { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
}

/* Runenstein V4: Die freie Steinfläche trägt eine monumentale, materialhafte Inschrift. */
.report-modal { padding: 13% 14.5% 13%; }
.report-modal-header { position: static; display: block; padding: 0 0 clamp(10px, 1.4vw, 17px); text-align: center; }
.report-modal-header > div { width: 100%; }
.report-modal-close {
    position: absolute; z-index: 9; top: 12.5%; right: 8.5%;
    width: clamp(40px, 3.8vw, 48px); height: clamp(40px, 3.8vw, 48px); margin: 0;
    color: #8f8c84;
    background: radial-gradient(circle at 42% 38%, rgba(78,78,74,.74), rgba(20,21,21,.9) 62%, rgba(4,5,6,.88));
    box-shadow: inset -2px -2px 2px rgba(0,0,0,.82), inset 1px 1px 1px rgba(207,204,191,.13), 0 0 8px rgba(var(--report-accent),.13);
}
.report-modal-close:hover,
.report-modal-close:focus-visible { color: #b4b0a6; box-shadow: inset -2px -2px 2px rgba(0,0,0,.88), inset 1px 1px 1px rgba(220,216,201,.18), 0 0 11px rgba(var(--report-accent),.28); }
.report-modal-kicker { font-size: clamp(.68rem, .85vw, .78rem); letter-spacing: .19em; }
.report-modal-header h2 { margin-top: 4px; font-size: clamp(1.18rem, 2vw, 1.65rem); letter-spacing: .115em; }
.report-modal-subtitle { margin-top: 4px; font-size: clamp(.72rem, 1.05vw, .88rem); }
.report-modal-content { padding: clamp(12px, 1.2vw, 17px) clamp(4px, .65vw, 9px) 16px; }
.report-modal-content > :is(.combat-report, .scout-report, .expedition-report, .message-game-report) { align-content: start; gap: clamp(11px, 1.45vw, 18px); }
.report-modal-content .combat-header { padding-block: 2px clamp(10px, 1.2vw, 15px); text-align: center; }
.report-modal-content .combat-header > strong { font-size: clamp(.92rem, 1.35vw, 1.15rem); letter-spacing: .09em; }
.report-modal-content :is(.combat-round, .combat-summary) > h3 { font-size: clamp(.91rem, 1.4vw, 1.18rem); text-align: center; }
.report-modal-content :is(.combat-force, .combat-result, .message-report-section) > h4 { font-size: clamp(.75rem, 1.05vw, .92rem); text-align: center; }
.report-modal-content :is(.combat-result, .combat-unit-inscription) h5 { font-size: clamp(.7rem, .95vw, .84rem); }
.report-modal-content :is(p, dd, td, blockquote, .message-report-body) { font-size: clamp(.7rem, .92vw, .82rem); line-height: 1.48; }
.report-modal-content :is(dt, th) { font-size: clamp(.61rem, .78vw, .72rem); }
.combat-meta-inscriptions { gap: clamp(8px, 1.1vw, 13px) clamp(22px, 4vw, 48px); margin-top: clamp(10px, 1.4vw, 17px); text-align: left; }
.combat-meta-inscriptions > div { display: block; padding-inline: clamp(2px, .45vw, 6px); }
.combat-meta-inscriptions dt { margin-bottom: 2px; font-size: clamp(.61rem, .76vw, .7rem); }
.combat-meta-inscriptions dd { font-size: clamp(.72rem, .95vw, .84rem); }
.combat-unit-inscriptions { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 20px) clamp(18px, 2.7vw, 34px); padding-block: 4px; }
.combat-unit-inscription { padding: 5px clamp(7px, 1vw, 12px) 9px; }
.combat-unit-inscription h5 { margin-bottom: 7px; letter-spacing: .075em; }
.combat-unit-inscription dt,
.combat-unit-inscription dd { font-size: clamp(.67rem, .86vw, .78rem); line-height: 1.42; }
.combat-unit-inscription dl { gap: 3px 12px; }
.report-modal-content .combat-result { text-align: center; }
.report-modal-content .combat-result h5 { margin-top: clamp(10px, 1.3vw, 16px); letter-spacing: .11em; }

/* Dunkler Steinkern plus gegenläufige Bruchkante: lesbar durch Relief, nicht Weiß. */
.report-modal-kicker,
.report-modal-subtitle,
.report-modal-content :is(p, dt, dd, th, td, strong, span, blockquote) {
    color: #85837d; -webkit-text-stroke: .12px rgba(8,9,9,.72);
    text-shadow: -1px -1px 1px rgba(0,0,0,.98), 1px 1px 0 rgba(209,205,192,.2), 0 2px 1px rgba(0,0,0,.58);
}
.report-modal-header h2,
.report-modal-content :is(h3, h4, h5) {
    color: #95928a; -webkit-text-stroke: .2px rgba(5,6,6,.82);
    text-shadow: -1px -1px 1px #010202, 1px 1px 0 rgba(221,216,201,.23), 0 2px 2px rgba(0,0,0,.76), 0 0 3px rgba(var(--report-accent),.1);
}
.report-modal-content .combat-header > strong,
.report-modal-content .combat-result > h4,
.report-modal-content .message-report-outcome,
.report-modal-content .expedition-report-result {
    color: #95817a; -webkit-text-stroke: .18px rgba(20,4,4,.75);
    text-shadow: -1px -1px 1px #160303, 1px 1px 0 rgba(211,184,163,.19), 0 0 4px rgba(var(--report-ember),.18);
}
.report-modal-content .combat-loss { color: #8f6f6b; }

/* Wanderndes Streiflicht legt die bereits vorhandene Gravur beim Öffnen frei. */
.report-modal-content::before {
    content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(var(--report-accent),.02) 39%, rgba(210,205,190,.14) 49%, rgba(var(--report-ember),.045) 54%, transparent 69%);
    mix-blend-mode: screen; transform: translateX(-125%);
}
.report-modal.is-awakening .report-modal-content::before { animation: report-inscription-raking-light 1.05s .28s ease-out both; }
@keyframes report-inscription-raking-light {
    0%, 16% { opacity: 0; transform: translateX(-125%); }
    38% { opacity: .75; }
    76% { opacity: .34; }
    100% { opacity: 0; transform: translateX(125%); }
}
@media (max-width: 900px) and (min-width: 761px) and (min-height: 621px) {
    .report-modal { padding: 13% 14.75% 13%; }
    .combat-unit-inscriptions { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 760px), (max-height: 620px) {
    .report-modal { padding: 29% 15.5% 18.5%; }
    .report-modal-close { top: 16%; right: 7.5%; width: 42px; height: 42px; }
    .report-modal-kicker { font-size: .64rem; }
    .report-modal-header h2 { font-size: clamp(1rem, 5vw, 1.28rem); }
    .report-modal-subtitle { display: block; font-size: .7rem; }
    .report-modal-content { padding-top: 10px; }
    .combat-meta-inscriptions { gap: 6px; }
    .combat-meta-inscriptions > div { padding-inline: 1px; }
    .combat-unit-inscriptions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .report-modal { padding: 13% 14.5% 13%; }
    .report-modal-close { top: 11%; right: 8%; width: 38px; height: 38px; }
    .report-modal-subtitle { display: none; }
    .combat-unit-inscriptions { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .report-modal.is-awakening .report-modal-content::before { animation: none !important; }
}

/* Runenstein V5: scrollbare Inschrift hinter einem festen Rand aus demselben Steinasset. */
.report-modal {
    --inscription-top: 20.8%;
    --inscription-side: 14.5%;
    --inscription-bottom: 20.8%;
    display: block;
    padding: 0;
}
.report-modal-inscription-viewport {
    position: absolute;
    z-index: 2;
    top: var(--inscription-top);
    right: var(--inscription-side);
    bottom: var(--inscription-bottom);
    left: var(--inscription-side);
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.72) 3%, #000 7%, #000 93%, rgba(0,0,0,.72) 97%, transparent 100%);
}
.report-modal-inscription-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
.report-modal-inscription-surface {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: clamp(5px, .6vw, 9px) clamp(4px, .55vw, 8px) clamp(12px, 1.3vw, 18px);
}
.report-modal-inscription-surface::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background: linear-gradient(104deg, rgba(0,0,0,.12), transparent 34%, rgba(111,115,125,.08) 58%, transparent 82%);
    mix-blend-mode: soft-light;
}
.report-modal-fixed-frame {
    position: absolute;
    z-index: 4;
    inset: 0;
    box-sizing: border-box;
    padding: var(--inscription-top) var(--inscription-side) var(--inscription-bottom);
    pointer-events: none;
    background: url("/images/reports/runestone-report-wide.webp") center / 100% 100% no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.54));
}
.report-modal-fixed-frame::before,
.report-modal-fixed-frame::after {
    content: "";
    position: absolute;
    right: var(--inscription-side);
    left: var(--inscription-side);
    height: clamp(12px, 1.7vw, 22px);
    pointer-events: none;
}
.report-modal-fixed-frame::before { top: calc(var(--inscription-top) - 2px); background: linear-gradient(to bottom, rgba(3,4,4,.58), transparent); }
.report-modal-fixed-frame::after { bottom: calc(var(--inscription-bottom) - 2px); background: linear-gradient(to top, rgba(3,4,4,.62), transparent); }
.report-modal-awakening { z-index: 5; }
.report-modal-close { z-index: 6; }
.report-modal-header {
    position: relative;
    z-index: 1;
    padding: 0 0 clamp(12px, 1.5vw, 18px);
    border: 0;
    background: transparent;
    box-shadow: none;
}
.report-modal-header::after,
.report-modal-content .combat-header::after,
.report-modal-content :is(.combat-round, .combat-summary, .combat-result, .message-report-section, .message-report-facts, .message-report-body, .expedition-report-header, blockquote)::after {
    content: "◇";
    position: absolute;
    right: 7%;
    bottom: -7px;
    left: 7%;
    height: 12px;
    color: #555551;
    background: linear-gradient(90deg, transparent, rgba(2,3,3,.66) 18%, rgba(174,171,159,.075) 49%, transparent 49.5%, transparent 50.5%, rgba(174,171,159,.075) 51%, rgba(2,3,3,.66) 82%, transparent);
    box-shadow: 0 1px 0 rgba(190,187,175,.055);
    font-size: .55rem;
    line-height: 12px;
    text-align: center;
    text-shadow: -1px -1px 0 #030404, 1px 1px 0 rgba(205,201,188,.13);
}
.report-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: none;
    padding: clamp(9px, 1vw, 14px) 0 0;
    overflow: visible;
    mask-image: none;
    touch-action: auto;
}
.report-modal-content::before { display: none; }
.report-modal-content :is(.combat-header, .combat-force, .combat-result, .combat-round, .combat-summary, .scout-loot-summary, .expedition-report-header, blockquote, .expedition-report-result, .message-report-header, .message-report-section, .message-report-facts, .message-report-body, .message-report-outcome, .message-report-new-city, .combat-round-balance, .combat-legacy-note) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.report-modal-content :is(.combat-table, .message-report-table) :is(th, td),
.report-modal-content :is(.combat-table, .message-report-table) tbody tr:nth-child(4) :is(th, td),
.combat-unit-inscription dt:nth-of-type(4),
.combat-unit-inscription dd:nth-of-type(4) {
    border-color: rgba(6,7,7,.48) !important;
    box-shadow: inset 0 1px rgba(197,194,182,.045);
}
.report-modal.is-awakening .report-modal-inscription-surface { animation: report-inscription-surface-awaken .82s .42s ease-out both; }
.report-modal-inscription-viewport::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(var(--report-accent),.025) 40%, rgba(207,202,187,.14) 49%, rgba(var(--report-ember),.035) 54%, transparent 68%);
    mix-blend-mode: screen;
    transform: translateX(-125%);
}
.report-modal.is-awakening .report-modal-inscription-viewport::after { animation: report-inscription-raking-light 1.05s .3s ease-out both; }
@keyframes report-inscription-surface-awaken {
    0% { opacity: .08; filter: brightness(.42) contrast(1.08); }
    58% { opacity: 1; filter: brightness(1.12) contrast(1.05); }
    100% { opacity: 1; filter: none; }
}
@media (max-width: 900px) and (min-width: 761px) and (min-height: 621px) {
    .report-modal { --inscription-top: 20.8%; --inscription-side: 14.75%; --inscription-bottom: 20.8%; }
}
@media (max-width: 760px), (max-height: 620px) {
    .report-modal { --inscription-top: 21.75%; --inscription-side: 15.5%; --inscription-bottom: 13.9%; }
    .report-modal-fixed-frame { background-image: url("/images/reports/runestone-report-portrait.webp"); }
    .report-modal-inscription-surface { padding-top: 3px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .report-modal { --inscription-top: 20.8%; --inscription-side: 14.5%; --inscription-bottom: 20.8%; }
    .report-modal-fixed-frame { background-image: url("/images/reports/runestone-report-wide.webp"); }
}
@media (prefers-reduced-motion: reduce) {
    .report-modal.is-awakening .report-modal-inscription-surface,
    .report-modal.is-awakening .report-modal-inscription-viewport::after { animation: none !important; opacity: 1; filter: none; transform: none; }
}

/* Runenstein V5.1: Nachlauf im normalen Flow hält die letzte Gravur über dem Unterornament. */
.report-modal {
    --inscription-end-space: clamp(56px, 7.5vw, 88px);
}
.report-modal-inscription-surface {
    box-sizing: border-box;
    padding-bottom: var(--inscription-end-space);
}
@media (max-width: 900px) and (min-width: 761px) and (min-height: 621px) {
    .report-modal { --inscription-end-space: clamp(52px, 8dvh, 80px); }
}
@media (max-width: 760px), (max-height: 620px) {
    .report-modal { --inscription-end-space: clamp(64px, 13dvh, 104px); }
}
@media (max-height: 500px) and (orientation: landscape) {
    .report-modal { --inscription-end-space: clamp(44px, 12dvh, 64px); }
}

/* Thingbund-Halle V3: kompakte Ausbaukarten mit lokalem nordischem Bildrahmen. */
.thingbund-upgrade.is-hall {
    border-color: rgba(174, 139, 82, .52);
}
.thingbund-upgrade-image {
    position: relative;
    box-sizing: border-box;
    height: 88px;
    margin: -1px -2px 2px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid #332a20;
    outline: 1px solid rgba(130, 116, 88, .58);
    background: repeating-linear-gradient(90deg, #31261c 0 7px, #493625 7px 10px, #261e18 10px 15px);
    box-shadow: inset 0 0 0 1px rgba(203, 181, 130, .16), 0 2px 5px rgba(0, 0, 0, .42);
}
.thingbund-upgrade-image::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(192, 173, 132, .3);
    box-shadow: inset 0 0 11px 3px rgba(0, 0, 0, .62);
    pointer-events: none;
}
.thingbund-upgrade-image img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #111;
    object-fit: cover;
    object-position: center;
}
.thingbund-upgrade-description {
    min-height: 2.5em;
    color: #bfb7a5;
    line-height: 1.25;
}
@media (max-width: 900px) {
    .thingbund-upgrade-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
    .thingbund-upgrade-grid { grid-template-columns: 1fr; }
    .thingbund-upgrade-image { height: 96px; }
}

/* Thingbund V4: kompakte interne Mitglieder-Rangliste. */
.thingbund-members-panel { min-width: 0; }
.thingbund-member-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 6px;
}
.thingbund-member-stats > div {
    display: grid;
    gap: 1px;
    padding: 4px 6px;
    border: 1px solid rgba(131, 105, 64, .45);
    background: linear-gradient(145deg, rgba(58, 44, 28, .52), rgba(17, 16, 13, .66));
}
.thingbund-member-stats span { color: #9f947f; font-size: .61rem; }
.thingbund-member-stats strong { color: #ddc99d; font-size: .76rem; }
.thingbund-member-toolbar { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.thingbund-member-toolbar input { width: min(210px, 100%); min-height: 27px; padding: 3px 7px; font-size: .68rem; }
.thingbund-member-frame {
    position: relative;
    min-width: 0;
    padding: 5px;
    border: 1px solid #615039;
    outline: 1px solid rgba(34, 29, 22, .96);
    background: repeating-linear-gradient(90deg, #241d16 0 8px, #352719 8px 12px, #1b1712 12px 18px);
    box-shadow: inset 0 0 0 1px rgba(207, 177, 117, .1), inset 0 0 13px rgba(0, 0, 0, .68), 0 4px 10px rgba(0, 0, 0, .35);
}
.thingbund-member-frame::before,
.thingbund-member-frame::after {
    content: "◆";
    position: absolute;
    z-index: 2;
    top: 2px;
    color: #716852;
    font-size: .48rem;
    text-shadow: 0 1px #000;
}
.thingbund-member-frame::before { left: 4px; }
.thingbund-member-frame::after { right: 4px; }
.thingbund-member-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: rgba(10, 11, 9, .9);
    font-size: .68rem;
}
.thingbund-member-table th {
    height: 28px;
    padding: 2px 4px;
    color: #d8c49b;
    border: 1px solid rgba(129, 108, 72, .42);
    background: linear-gradient(#383127, #211e19);
    text-align: left;
}
.thingbund-member-table th:nth-child(1) { width: 4.5%; }
.thingbund-member-table th:nth-child(2) { width: 15%; }
.thingbund-member-table th:nth-child(3) { width: 9%; }
.thingbund-member-table th:nth-child(4) { width: 18%; }
.thingbund-member-table th:nth-child(5) { width: 11%; }
.thingbund-member-table th:nth-child(6) { width: 10%; }
.thingbund-member-table th:nth-child(7) { width: 8%; }
.thingbund-member-table th:nth-child(8) { width: 24.5%; }
.thingbund-member-table th button {
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.thingbund-member-table td {
    height: 38px;
    padding: 3px 4px;
    overflow-wrap: anywhere;
    color: #c8bdab;
    border: 1px solid rgba(116, 95, 63, .24);
    vertical-align: middle;
}
.thingbund-member-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
.thingbund-member-table tbody tr:hover { background: rgba(151, 119, 68, .1); }
.thingbund-member-empty { padding: 8px !important; color: #978d7a; text-align: center; }
.thingbund-member-table tr.is-own { box-shadow: inset 3px 0 #7f9b72; background: rgba(78, 104, 68, .1); }
.thingbund-member-table tr.is-jarl { box-shadow: inset 3px 0 #b28b4d; }
.thingbund-member-table tr.rank-1 td:first-child,
.thingbund-member-table tr.rank-2 td:first-child,
.thingbund-member-table tr.rank-3 td:first-child { color: #e0bd79; font-weight: 700; }
.thingbund-jarl-name { color: #dfbd78; }
.thingbund-jarl-name::before { content: "ᛃ "; color: #9e7d45; }
.thingbund-own-marker {
    display: inline-block;
    margin-left: 4px;
    padding: 0 3px;
    color: #b7caaa;
    border: 1px solid rgba(116, 145, 99, .45);
    font-size: .52rem;
}
.thingbund-activity { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.thingbund-activity::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #777168; box-shadow: 0 0 0 1px #171713; }
.thingbund-activity.is-online::before { background: #719768; }
.thingbund-activity.is-recent::before { background: #a58b55; }
.thingbund-activity.is-inactive::before,
.thingbund-activity.is-unknown::before { background: #67645e; }
.thingbund-member-manage { padding: 2px 3px !important; }
.thingbund-rank-actions { display: flex; gap: 2px; }
.thingbund-rank-actions button,
.thingbund-member-manage details button {
    min-height: 22px;
    padding: 2px 4px;
    font-size: .57rem;
}
.thingbund-rank-actions button.is-current { color: #f1d598; border-color: #a17d46; background: #4a3823; }
.thingbund-member-manage details { margin-top: 2px; }
.thingbund-member-manage summary { color: #9f947e; font-size: .56rem; cursor: pointer; }
.thingbund-member-manage details button { margin: 2px 2px 0 0; }
@media (max-width: 850px) {
    .thingbund-member-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .thingbund-member-table { font-size: .62rem; }
    .thingbund-member-table th:nth-child(4) { width: 16%; }
    .thingbund-member-table th:nth-child(8) { width: 27%; }
}
@media (max-width: 650px) {
    .thingbund-member-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thingbund-member-frame { padding: 4px; }
    .thingbund-member-table,
    .thingbund-member-table tbody,
    .thingbund-member-table tr,
    .thingbund-member-table td { display: block; width: 100%; box-sizing: border-box; }
    .thingbund-member-table thead { display: none; }
    .thingbund-member-table tr { display: grid; grid-template-columns: .45fr 1.55fr 1fr; padding: 5px; border-bottom: 1px solid rgba(136, 107, 65, .48); }
    .thingbund-member-table td { display: grid; grid-template-columns: 62px 1fr; min-height: 25px; height: auto; padding: 3px 4px; border: 0; }
    .thingbund-member-table td::before { content: attr(data-label); color: #8f856f; font-size: .56rem; }
    .thingbund-member-table td:nth-child(1),
    .thingbund-member-table td:nth-child(2),
    .thingbund-member-table td:nth-child(3) { display: block; grid-template-columns: none; font-weight: 700; }
    .thingbund-member-table td:nth-child(1)::before,
    .thingbund-member-table td:nth-child(2)::before,
    .thingbund-member-table td:nth-child(3)::before { content: none; }
    .thingbund-member-table td:nth-child(n+4) { grid-column: 1 / -1; }
    .thingbund-member-manage { grid-column: 1 / -1; }
    .thingbund-rank-actions { flex-wrap: wrap; }
}