/* --- OFFIZIERSTURM THRONSAAL FIX --- */

/* Verhindert Ghost-Effekte wie den goldenen Ring links vom Offizier */
#throne_character_area > div:not(#current_officer_display):not(.officer-card):not(.throne-lord-img) {
    display: none !important;
}

/* Erzwingt side-by-side Layout auf Desktop (Lord & Offizier) */
@media (min-width: 1025px) {
    #throne_character_area {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
    }
}
/* ----------------------------------- */

:root {
    --bg-dark: #07080a; 
    --bg-panel: #111418; 
    --bg-card: #191f26;
    --primary-gold: #d4af37; 
    --primary-gold-hover: #f1c40f;
    --text-main: #e0e0e0; 
    --text-muted: #a0a0a0;
    --border-color: rgba(212, 175, 55, 0.15);
    --danger: #e74c3c; 
    --fine: #2ecc71;
    --mana-color: #9b59b6; 
    --arcane-color: #3498db;
    --shadow-card: 0 4px 15px rgba(0,0,0,0.5); 
    --transition: all 0.3s ease;
}
/* Versteckt das Mobile-Menü auf Desktop-Geräten */
.menu-toggle, .close-menu-btn { display: none; }

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); overflow-x: hidden; font-size: 14px; }

/* --- EINGABEFELDER (Verhindert Smartphone Zoom & Neues Design) --- */
input[type="text"], input[type="password"], input[type="number"] {
    padding: 12px 15px;
    font-size: 16px; /* WICHTIG: Verhindert Auto-Zoom auf Handys! */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #fff;
    outline: none;
    transition: var(--transition);
    font-family: inherit;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    border-color: var(--primary-gold-hover);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), inset 0 2px 5px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.8);
}

/* --- LABORATORIUM REFRESH --- */
.alchemy-hero {
    position: relative;
    min-height: 360px;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 18px;
    border: 1px solid rgba(202, 170, 96, 0.28);
    background: #08070b;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.alchemy-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04) brightness(0.78);
}

.alchemy-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 6, 10, 0.94) 0%, rgba(13, 9, 19, 0.72) 45%, rgba(7, 6, 10, 0.22) 100%),
        linear-gradient(0deg, rgba(5, 4, 7, 0.86) 0%, rgba(5, 4, 7, 0.12) 55%);
}

.alchemy-hero-content {
    position: relative;
    z-index: 1;
    max-width: 690px;
    padding: 36px;
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.alchemy-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-gold);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.alchemy-kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.75;
}

.alchemy-hero h1 {
    margin: 8px 0 10px;
    color: #f6e8ff;
    font-size: 46px;
    line-height: 1.05;
    text-shadow: 0 0 22px rgba(155, 89, 182, 0.55);
}

.alchemy-hero p {
    margin: 0;
    max-width: 620px;
    color: rgba(245, 239, 229, 0.88);
    line-height: 1.55;
}

.alchemy-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    max-width: 590px;
}

.alchemy-hero-stats div,
.alchemy-meta-row span {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 8, 13, 0.72);
    border-radius: 8px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
}

.alchemy-hero-stats span,
.alchemy-meta-row span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.alchemy-hero-stats strong,
.alchemy-meta-row strong {
    display: block;
    margin-top: 3px;
    color: #f0d589;
    font-size: 15px;
}

.alchemy-stage-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.alchemy-tab {
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(18, 18, 24, 0.88);
    cursor: pointer;
    font-weight: 800;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.alchemy-tab span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 7px;
    border-radius: 999px;
    color: #0b090f;
    background: var(--text-muted);
}

.alchemy-tab:hover:not(:disabled),
.alchemy-tab.active {
    transform: translateY(-1px);
    border-color: rgba(185, 121, 220, 0.72);
    color: #fff;
    background: linear-gradient(135deg, rgba(92, 50, 126, 0.88), rgba(22, 28, 34, 0.92));
}

.alchemy-tab.active span {
    background: var(--primary-gold);
}

.alchemy-tab:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.alchemy-panel {
    border: 1px solid rgba(202, 170, 96, 0.18);
    border-radius: 8px;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(155, 89, 182, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(22, 22, 29, 0.96), rgba(12, 12, 16, 0.98));
    box-shadow: inset 0 0 45px rgba(155, 89, 182, 0.06);
}

.alchemy-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 22px;
}

.alchemy-panel-head h2 {
    margin: 6px 0 0;
    color: #f7efd8;
    font-size: 24px;
    line-height: 1.18;
}

.alchemy-panel-head p {
    max-width: 460px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.alchemy-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 16px;
}

.alchemy-choice-grid.two {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    max-width: 620px;
    margin: 0 auto;
}

.alchemy-choice-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    color: var(--text-light);
    background: linear-gradient(180deg, rgba(29, 28, 36, 0.94), rgba(12, 12, 16, 0.94));
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.alchemy-choice-card:hover:not(:disabled),
.alchemy-choice-card.selected {
    transform: translateY(-4px);
    border-color: rgba(202, 170, 96, 0.82);
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.28), 0 0 24px rgba(155, 89, 182, 0.18);
}

.alchemy-choice-card:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.alchemy-choice-card img,
.alchemy-material-side img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(202, 170, 96, 0.56);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.34);
}

.alchemy-choice-card span {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.alchemy-choice-card small {
    color: var(--text-muted);
    font-size: 12px;
}

.alchemy-back-btn {
    width: auto;
    min-height: 38px;
    margin-bottom: 16px;
    padding: 8px 13px;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 8, 12, 0.65);
    cursor: pointer;
}

.alchemy-back-btn:hover {
    color: #fff;
    border-color: rgba(202, 170, 96, 0.58);
}

.alchemy-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.alchemy-chamber {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 190px minmax(180px, 1fr);
    gap: 20px;
    align-items: center;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, rgba(155, 89, 182, 0.24), transparent 31%),
        linear-gradient(135deg, rgba(8, 8, 12, 0.96), rgba(20, 22, 26, 0.96));
}

.alchemy-material-side {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
}

.alchemy-material-side span {
    color: #f7efd8;
    font-weight: 800;
    text-align: center;
}

.alchemy-input-row {
    display: grid;
    grid-template-columns: minmax(0, 140px) 58px;
    gap: 8px;
    align-items: center;
}

.alchemy-input-row .trade-input {
    width: 100%;
    min-height: 42px;
    color: #fff;
    background: rgba(4, 4, 7, 0.84);
    border-color: rgba(202, 170, 96, 0.32);
}

.alchemy-crucible-core {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.alchemy-crucible-core::before {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 212, 126, 0.98), rgba(155, 89, 182, 0.74) 45%, rgba(46, 204, 113, 0.16) 70%, transparent 72%);
    box-shadow: 0 0 28px rgba(155, 89, 182, 0.6), 0 0 46px rgba(242, 212, 126, 0.22);
    animation: alchemyPulse 2.2s ease-in-out infinite;
}

.alchemy-orbit {
    position: absolute;
    border: 1px solid rgba(246, 232, 255, 0.34);
    border-radius: 50%;
}

.alchemy-orbit.one {
    width: 128px;
    height: 128px;
    animation: alchemyRotate 6s linear infinite;
}

.alchemy-orbit.two {
    width: 154px;
    height: 154px;
    transform: rotate(62deg);
    animation: alchemyRotate 9s linear infinite reverse;
}

.alchemy-flame {
    position: absolute;
    bottom: 15px;
    width: 44px;
    height: 28px;
    border-radius: 50% 50% 42% 42%;
    background: radial-gradient(circle at 50% 25%, #fff0aa, #bb6dd8 58%, transparent 70%);
    filter: blur(1px);
}

.alchemy-arrow {
    position: relative;
    z-index: 1;
    color: #0c0812;
    font-weight: 900;
}

.alchemy-result-pill {
    min-width: 132px;
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--fine);
    font-size: 30px;
    font-weight: 900;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.28);
    text-shadow: 0 0 12px rgba(46, 204, 113, 0.42);
}

.alchemy-transmute-btn {
    width: 100%;
    min-height: 56px;
    margin-top: 18px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #8e44ad, #5c327e 48%, #1f8f6b);
    box-shadow: 0 0 24px rgba(155, 89, 182, 0.34);
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
}

.alchemy-transmute-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    background: linear-gradient(135deg, rgba(90, 90, 102, 0.9), rgba(34, 34, 42, 0.9));
    box-shadow: none;
}

@keyframes alchemyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes alchemyPulse {
    0%, 100% { transform: scale(0.94); opacity: 0.82; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 900px) {
    .alchemy-hero,
    .alchemy-hero-content {
        aspect-ratio: auto;
        min-height: 310px;
    }

    .alchemy-hero-content {
        padding: 24px;
    }

    .alchemy-hero h1 {
        font-size: 36px;
    }

    .alchemy-panel-head {
        display: block;
    }

    .alchemy-panel-head p {
        margin-top: 10px;
    }

    .alchemy-meta-row,
    .alchemy-chamber {
        grid-template-columns: 1fr;
    }

    .alchemy-crucible-core {
        width: 140px;
        height: 140px;
    }

    .alchemy-material-side {
        min-height: 170px;
    }
}

@media (max-width: 620px) {
    .alchemy-hero-stats,
    .alchemy-stage-tabs,
    .alchemy-choice-grid,
    .alchemy-choice-grid.two {
        grid-template-columns: 1fr;
    }

    .alchemy-panel,
    .alchemy-chamber {
        padding: 16px;
    }

    .alchemy-hero-content {
        padding: 18px;
    }

    .alchemy-hero h1 {
        font-size: 30px;
    }

    .alchemy-choice-card {
        min-height: 150px;
    }

    .alchemy-input-row {
        grid-template-columns: minmax(0, 1fr) 58px;
        width: min(100%, 240px);
    }
}
textarea.trade-input,
select.trade-input {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}
textarea.trade-input::placeholder,
input.trade-input::placeholder {
    color: rgba(224, 224, 224, 0.55);
}
textarea.trade-input:focus,
select.trade-input:focus {
    color: #fff;
    border-color: var(--primary-gold-hover);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), inset 0 2px 5px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.82);
    outline: none;
}
#ai_companion_input {
    color: var(--text-main) !important;
    caret-color: var(--primary-gold);
}
#ai_companion_input::placeholder {
    color: rgba(224, 224, 224, 0.5);
}
.login-input { width: 100%; max-width: 250px; text-align: center; }
.trade-input { width: 120px; text-align: right; }
.unit-slider { width: 100px; vertical-align: middle; accent-color: var(--primary-gold); cursor: pointer; }


/* --- EXPEDITIONS SETUP UI --- */
.unit-spinners { display: flex; gap: 5px; align-items: center; margin-top: 10px; }
.small-btn { padding: 6px 12px; font-size: 14px; width: auto; min-width: 40px; font-weight: bold; background: rgba(255,255,255,0.05); }

.floating-power-indicator { 
    position: fixed; bottom: 20px; left: 20px; z-index: 9999;
    background: rgba(15, 18, 22, 0.95); border: 2px solid var(--primary-gold); 
    padding: 12px 20px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.9); 
    display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: bold;
    backdrop-filter: blur(5px); animation: slideUpFloat 0.3s ease-out;
}
@keyframes slideUpFloat { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
    /* Das neue 2-Zeilen-Grid für die Buttons */
    .unit-spinners { 
        width: 100%; 
        display: grid; 
        grid-template-columns: 1fr 1fr 60px 1fr 1fr; /* 5 Spalten für die erste Zeile */
        gap: 6px; 
        margin-top: 15px; 
        border-top: 1px solid rgba(255,255,255,0.05); /* Optische Trennung */
        padding-top: 15px;
    }
    
    .small-btn { 
        padding: 10px 0; 
        min-width: 0; /* Hebt die Desktop-Breite auf */
        font-size: 13px; /* Etwas kleiner, damit alles passt */
    }
    
    /* Das Eingabefeld in der Mitte */
    .unit-spinners .trade-input { 
        width: 100% !important; /* Überschreibt die festen 70px */
        padding: 8px 2px !important; 
    }
    
    /* Der MAX Button nimmt die gesamte zweite Zeile ein */
    .unit-spinners button:last-child {
        grid-column: 1 / -1; /* Spanne über alle 5 Spalten */
        margin-top: 5px;
        padding: 12px;
        font-size: 15px;
    }

    .floating-power-indicator { bottom: 10px; left: 10px; right: 10px; justify-content: center; font-size: 15px; }
}

/* Top Bar */
.top-bar {
    position: fixed; top: 0; width: 100%; height: 65px;
    background: rgba(17, 20, 24, 0.95); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; z-index: 1000;
}
.brand { font-size: 22px; font-weight: bold; color: var(--primary-gold); letter-spacing: 3px; text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
.global-queues { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 0; padding: 0 18px; }
.global-queue-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; height: 30px; padding: 0 9px; border: 1px solid rgba(212,175,55,0.18); border-radius: 999px; background: rgba(0,0,0,0.28); color: var(--text-muted); font-size: 11px; font-weight: bold; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; }
.global-queue-chip:hover { border-color: rgba(212,175,55,0.55); background: rgba(212,175,55,0.1); color: var(--text-main); }
.global-queue-chip span { overflow: hidden; text-overflow: ellipsis; }
.global-queue-chip strong { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--primary-gold); font-size: 10px; line-height: 1; }
.global-queue-chip em { color: var(--text-main); font-style: normal; font-size: 11px; }
.global-queue-research strong { color: var(--mana-color); }
.global-queue-unit strong { color: var(--danger); }
.resources { display: flex; gap: 20px; }
.res-item { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: bold; cursor: help; }
.res-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); object-fit: cover;}
.res-mana { border-color: var(--mana-color); box-shadow: 0 0 8px var(--mana-color); }
.res-arcane { border-color: var(--arcane-color); box-shadow: 0 0 8px var(--arcane-color); }

/* Layout & Sidebar */
.game-container { display: flex; margin-top: 65px; height: calc(100vh - 65px); }
.sidebar { width: 250px; background-color: var(--bg-panel); border-right: 1px solid var(--border-color); padding: 25px 0; overflow-y: auto; z-index: 100; }
.nav-links { list-style: none; }
.nav-section { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 25px 25px 10px 25px; opacity: 0.7; }
.nav-links a { display: flex; align-items: center; gap: 10px; padding: 8px 20px; color: var(--text-main); text-decoration: none; transition: var(--transition); border-left: 3px solid transparent; font-size: 15px; }
.nav-links a:hover { background-color: rgba(255,255,255,0.03); color: #fff;}
.nav-links a.active { background-color: rgba(212, 175, 55, 0.05); color: var(--primary-gold); border-left: 3px solid var(--primary-gold); font-weight: bold; }
.nav-icon { font-size: 18px; }

/* Main Content */
.content { 
    flex: 1; padding: 40px 50px; overflow-y: auto; background-color: var(--bg-dark);
    background-image: linear-gradient(rgba(7, 8, 10, 0.85), rgba(7, 8, 10, 0.98)), url('images/Background/Burg Innen Hintergrund.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
}
.page { display: none; animation: fadeIn 0.4s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.page-title { margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.page-title h2 { color: var(--primary-gold); font-weight: 300; font-size: 32px; letter-spacing: 1px; margin-bottom: 5px; }
.page-title p { color: var(--text-muted); font-size: 15px; }

/* Dashboard Header & GIF Banner */
.dashboard-header { display: flex; margin-bottom: 30px; background: rgba(19, 23, 28, 0.7); border-radius: 8px; border: 1px solid var(--border-color); backdrop-filter: blur(5px); border-left: 4px solid var(--primary-gold); overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.hero-text { padding: 30px 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-text h1 { color: #fff; margin-bottom: 10px; font-weight: 300; font-size: 28px; }
.hero-text p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.hero-visual { width: 320px; flex-shrink: 0; display: flex; border-left: 1px solid var(--border-color); position: relative; }
.hero-visual::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(19, 23, 28, 0.8) 0%, transparent 20%); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Dashboard Grid & Cards */
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.dashboard-card { background: rgba(25, 31, 38, 0.7); padding: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(5px);}
.dashboard-card h3 { color: var(--primary-gold); margin-bottom: 25px; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }
.full-width-card { grid-column: 1 / -1; }

/* --- REPARIERT: Berater, Score-Grid & Arkan --- */
.advisor-content { display: flex; align-items: center; gap: 20px; }
.advisor-portrait { width: 140px; height: 140px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 3px solid var(--primary-gold); box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }
.speech-bubble { position: relative; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; flex: 1; font-style: italic; line-height: 1.6; }
.speech-bubble::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); border-width: 12px 12px 12px 0; border-style: solid; border-color: transparent rgba(0,0,0,0.5) transparent transparent; }

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.score-item { display: flex; align-items: center; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.2s ease; }
.score-item:hover { transform: translateY(-2px); border-color: rgba(212, 175, 55, 0.3); }
.score-item img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 6px; margin-right: 15px; border: 1px solid var(--primary-gold); object-fit: cover; }
.score-main { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(0,0,0,0.3) 100%); border-left: 4px solid var(--primary-gold); }
.score-main img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }
.score-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.big-stat { font-size: 28px; color: #fff; font-weight: bold; }

.arcane-info-layout { display: flex; gap: 40px; align-items: center; }
.arcane-large-icon { width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--arcane-color); box-shadow: 0 0 20px var(--arcane-color); object-fit: cover; }
.arcane-description h3 { color: var(--arcane-color); margin-bottom: 10px; font-size: 16px; text-transform: none; letter-spacing: normal; }
.arcane-description p { margin-bottom: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.production-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.prod-item { display: flex; align-items: center; gap: 15px; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.02);}
.prod-item img { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; }
.prod-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; }
.fine { color: var(--fine); font-weight: bold; font-size: 20px; }

/* Card Grid (Gebäude, Akademie) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.build-card { background: var(--bg-card); border-radius: 8px; overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.03); }
.build-card:hover { transform: translateY(-5px); border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.7); }
.build-card.locked { filter: grayscale(1); opacity: 0.6; border-color: transparent; }
.build-card.locked:hover { transform: none; box-shadow: var(--shadow-card); }

.card-image-wrapper { position: relative; width: 100%; padding-top: 80%; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.3); }
.card-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.build-card:hover .card-image-wrapper img { transform: scale(1.08); }
.card-level-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.8); color: var(--primary-gold); padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; border: 1px solid var(--primary-gold); backdrop-filter: blur(2px); z-index: 2;}

.card-content { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.card-header-clean h3 { font-size: 20px; color: #fff; font-weight: 500; margin-bottom: 5px; }
.card-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.card-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 15px; flex: 1; }
.costs-clean { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px; border: 1px solid rgba(255,255,255,0.02); }
.cost-item { display: flex; align-items: center; gap: 8px; color: var(--text-main); }
.cost-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover;}
.card-footer-clean { padding: 0 25px 25px 25px; }

.btn-clean { width: 100%; padding: 14px; border: 1px solid var(--primary-gold); border-radius: 4px; background: rgba(212, 175, 55, 0.05); color: var(--primary-gold); font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--transition); }
.btn-clean:hover { background: var(--primary-gold); color: #000; }
.btn-clean:disabled { background: rgba(0,0,0,0.2); color: #555; border-color: #333; cursor: not-allowed; }
.text-error { color: #e74c3c; font-size: 13px; font-weight: normal;}

/* --- MEDIA & VIDEOS --- */
video { object-fit: cover; outline: none; }
.card-image-wrapper img, .card-image-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.build-card:hover .card-image-wrapper img, .build-card:hover .card-image-wrapper video { transform: scale(1.08); }
.hero-visual img, .hero-visual video { width: 100%; height: 100%; object-fit: cover; }

/* Tooltips */
.custom-tooltip { position: relative; }
.custom-tooltip::after { content: attr(data-tip); position: absolute; top: 130%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(15, 20, 25, 0.95); border: 1px solid var(--primary-gold); color: var(--text-main); padding: 10px 15px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 2000; box-shadow: 0 10px 25px rgba(0,0,0,0.8); }
.custom-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Ladebalken */
.progress-wrapper { width: 100%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; height: 18px; position: relative; overflow: hidden; margin-top: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.header-progress-wrapper { width: 70px; height: 14px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; position: relative; overflow: hidden; margin-left: 8px; }
.progress-fill { height: 100%; width: 0%; background: var(--primary-gold); transition: width 1s linear; }
.progress-fill.research { background: var(--mana-color); box-shadow: 0 0 8px var(--mana-color); }
.progress-fill.unit { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000; }

/* Prozesse / Handel */
.processes-list { display: flex; flex-direction: column; gap: 10px; }
.throne-process-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.throne-process-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid rgba(212,175,55,0.22); border-radius: 6px; background: rgba(0,0,0,0.28); color: var(--text-muted); font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
.throne-process-tab:hover, .throne-process-tab.active { color: var(--text-main); border-color: rgba(212,175,55,0.62); background: rgba(212,175,55,0.12); }
.throne-process-tab strong { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--primary-gold); font-size: 11px; line-height: 1.2; }
.throne-process-list { display: flex; flex-direction: column; gap: 10px; }
.throne-process-empty { margin: 4px 0 0; padding: 12px 4px; color: var(--text-muted); font-style: italic; }
.process-item { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); padding: 10px 15px; border-radius: 6px; }
.process-info { display: flex; align-items: center; gap: 15px; font-weight: bold; }
.process-info img { width: 35px; height: 35px; border-radius: 4px; object-fit: cover; border: 1px solid var(--primary-gold); }
.process-timer { flex: 1; max-width: 300px; margin-left: 20px; }
.trade-box { background: var(--bg-card); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); }
.trade-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- NEUES LOGIN UI --- */
.login-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #000; }

/* Responsive Hintergrund-Videos */
.login-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; image-rendering: pixelated; }
.landscape-video { display: block; }
.portrait-video { display: none; }

/* --- MODAL OVERLAY (WICHTIG: Muss für Desktop & Mobile gelten, also NICHT in einem @media-Block stehen!) --- */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(5px); 
    z-index: 99999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    animation: fadeInPreview 0.2s ease forwards; 
}

@keyframes fadeInPreview { 
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

@media (max-aspect-ratio: 1/1) {
    .landscape-video { display: none; }
    .portrait-video { display: block; }
}
.login-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: -1; backdrop-filter: blur(3px); }

/* Inhalte */
.login-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; padding: 20px; }
.login-title { color: var(--primary-gold); font-size: 50px; font-weight: 300; letter-spacing: 8px; text-transform: uppercase; margin-bottom: 40px; text-shadow: 0 0 20px rgba(212,175,55,0.4); text-align: center; }

/* Schwebendes Passwort-Fenster */
.login-password-floating { background: rgba(15, 18, 22, 0.9); border: 1px solid var(--primary-gold); border-radius: 8px; padding: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.9); backdrop-filter: blur(10px); text-align: center; margin-bottom: 30px; width: 100%; max-width: 350px; animation: slideDownFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes slideDownFade { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }

/* Spielerkarten */
.login-cards { display: flex; gap: 40px; justify-content: center; width: 100%; flex-wrap: wrap; }
.login-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); width: 240px; backdrop-filter: blur(5px); }
.login-card:hover { transform: translateY(-10px); border-color: rgba(212,175,55,0.5); box-shadow: 0 15px 30px rgba(0,0,0,0.8); }
.login-card.selected { transform: translateY(-10px); border-color: var(--primary-gold); background: rgba(212,175,55,0.1); box-shadow: 0 0 25px rgba(212,175,55,0.3); }

/* Avatar / Video */
.login-avatar { width: 150px; height: 150px; margin: 0 auto 20px auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--primary-gold); box-shadow: 0 0 20px rgba(0,0,0,0.8); position: relative; background: #000; }
.login-avatar video, .login-avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.login-footer { position: absolute; bottom: 25px; left: 0; width: 100%; text-align: center; color: rgba(255,255,255,0.3); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; z-index: 1; pointer-events: none; }
/* =========================================
   RESPONSIVE DESIGN (Tablets & Smartphones)
   ========================================= */
@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    
    /* GIF BANNER LOGIK FÜR TABLET/MOBILE */
    .dashboard-header { flex-direction: column-reverse; padding: 0; }
    .hero-visual { width: 100%; height: 200px; border-left: none; border-bottom: 2px solid var(--primary-gold); display: block; }
    .hero-visual::after { background: linear-gradient(to bottom, transparent 40%, rgba(19, 23, 28, 1) 100%); }
    .hero-text { padding: 25px; text-align: center; }
}

@media (max-width: 1180px) and (min-width: 769px) {
    .top-bar { padding: 0 20px; }
    .global-queues { padding: 0 10px; gap: 6px; }
    .global-queue-chip { max-width: none; padding: 0 8px; }
    .global-queue-chip span { display: none; }
    .resources { gap: 12px; }
}

@media (max-width: 768px) {
    /* --- REPARIERTER MOBILE HEADER --- */
    .top-bar { 
        height: auto; 
        min-height: 60px;
        padding: 10px 15px; 
        flex-direction: row; /* Elemente nebeneinander lassen */
        flex-wrap: wrap; /* Erlaubt den Zeilenumbruch für die Ressourcen */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    .menu-toggle { 
        display: inline-block; 
        background: none; border: none; 
        color: var(--primary-gold); font-size: 26px; 
        cursor: pointer; margin-right: 10px; 
        vertical-align: middle; 
    }
    
    .brand { 
        font-size: 18px; 
        display: flex; align-items: center; 
        width: auto; flex: 1;
    }
    
    /* Versteckt den Spielernamen oben auf dem Handy, um Platz zu sparen */
    #topbar_player_name { display: none; }
    
    /* Die globale Bauschleife oben auf dem Handy verstecken (man sieht sie eh im Thronsaal) */
    .global-queues { display: none; }

    /* Ressourcen-Leiste kompakt in die zweite Zeile schieben */
    .resources { 
        width: 100%; 
        justify-content: space-between; 
        gap: 5px; 
        padding-top: 8px; 
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .res-item { font-size: 12px; gap: 4px; } /* Text etwas kleiner */
    .res-icon { width: 20px; height: 20px; } /* Icons etwas kleiner */
    
    /* --- REPARIERTER ABSTAND NACH UNTEN --- */
    .game-container { 
        flex-direction: column; 
        margin-top: 95px; /* Hier sind die 60px für perfekten Abstand! */
        margin-bottom: 20px; 
        height: auto; 
    }
    /* Mobile dashboard grid: Saubere Spalten-Logik, ohne manuelle Reihung */
    .dashboard-grid { 
        display: grid;
        grid-template-columns: 1fr; /* Eine Spalte auf dem Handy */
        gap: 20px; 
    }

    /* Stellt sicher, dass der Offizier auf Mobil IMMER unter dem Lord angezeigt wird */
    #throne_character_area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    /* --- NEUES FULLSCREEN MOBILE MENÜ (Bleibt wie vorher) --- */
    .sidebar { 
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
        background: rgba(7, 8, 10, 0.98); backdrop-filter: blur(15px);
        z-index: 9999; padding: 80px 20px 40px 20px;
        display: flex; flex-direction: column;
        transform: translateY(-100%); opacity: 0; pointer-events: none;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        border: none; overflow-y: auto;
    }
    
  
    .sidebar.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    
    .close-menu-btn { display: block; position: absolute; top: 20px; right: 30px; background: none; border: none; color: var(--text-muted); font-size: 40px; cursor: pointer; transition: color 0.3s; }
    .close-menu-btn:hover { color: var(--danger); }

    /* 2-Spalten Grid für die Navigation */
    .nav-links { 
        display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; 
        align-content: start; flex-direction: unset;
    }
    
    .nav-section { display: block; grid-column: 1 / -1; margin: 20px 0 5px 0; text-align: center; font-size: 14px; color: var(--primary-gold); }
    
    .nav-links a { 
        flex-direction: column; padding: 20px 10px; gap: 10px; 
        border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; 
        background: rgba(0,0,0,0.5); font-size: 13px; text-align: center;
        border-left: 1px solid rgba(255,255,255,0.05) !important;
    }
    .nav-links a.active { border-color: var(--primary-gold); background: rgba(212, 175, 55, 0.1); border-left: 1px solid var(--primary-gold) !important; }
    .nav-icon { font-size: 28px; margin-bottom: 5px; }
    /* ------------------------------------ */

    .content { padding: 20px; padding-bottom: 40px; }
    .card-grid { grid-template-columns: 1fr; }
    .trade-res-grid { grid-template-columns: 1fr; }
    .login-cards { flex-direction: column; align-items: center; }
    
    /* Mobile Anpassungen für den Thronsaal */
    .advisor-content { flex-direction: column; text-align: center; gap: 15px; }
    .speech-bubble::before { top: -12px; left: 50%; transform: translateX(-50%); border-width: 0 12px 12px 12px; border-color: transparent transparent rgba(0,0,0,0.5) transparent; }
    .arcane-info-layout { flex-direction: column; text-align: center; gap: 20px; }
    .throne-process-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .throne-process-tab:first-child { grid-column: 1 / -1; }
    .process-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .process-timer { margin-left: 0; width: 100%; max-width: 100%; }
 }


/* --- NACHRICHTENCENTER UI --- */
textarea.trade-input { font-family: inherit; font-size: 15px; }
.badge { background: var(--danger); color: white; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 8px; font-weight: bold; box-shadow: 0 0 8px rgba(231, 76, 60, 0.8); }

.msg-card { 
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); 
    border-radius: 8px; padding: 20px; margin-bottom: 15px; 
    display: flex; gap: 20px; align-items: center; 
}
.msg-card.unread { border-color: var(--primary-gold); background: rgba(212, 175, 55, 0.05); }
.msg-card img { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--primary-gold); object-fit: cover; flex-shrink: 0; }

.emotion-selector { display: flex; gap: 15px; margin-bottom: 20px; }
.emotion-label { 
    cursor: pointer; padding: 12px; border: 1px solid var(--border-color); 
    border-radius: 6px; background: rgba(0,0,0,0.5); transition: var(--transition); 
    text-align: center; flex: 1; color: var(--text-muted); font-weight: bold;
}
input[type="radio"]:checked + .emotion-label { 
    border-color: var(--primary-gold); background: rgba(212, 175, 55, 0.2); color: #fff; 
}

@media (max-width: 768px) {
    .msg-card { flex-direction: column; text-align: center; }
    .msg-card .speech-bubble::before { top: -12px; left: 50%; transform: translateX(-50%); border-width: 0 12px 12px 12px; border-color: transparent transparent rgba(0,0,0,0.5) transparent; }
}

/* --- IN-GAME BENACHRICHTIGUNGEN (TOASTS) --- */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(19, 23, 28, 0.95); border: 1px solid var(--primary-gold); border-left: 4px solid var(--primary-gold); border-radius: 6px; padding: 15px; width: 300px; display: flex; gap: 15px; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.8); backdrop-filter: blur(5px); animation: slideInRight 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; pointer-events: auto; }
.toast img { width: 45px; height: 45px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); object-fit: cover; }
.toast-content { flex: 1; }
.toast-title { color: var(--primary-gold); font-size: 14px; font-weight: bold; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 1px;}
.toast-msg { color: var(--text-main); font-size: 13px; line-height: 1.4; }

@keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutToast { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

@media (max-width: 768px) { 
    .toast-container { top: 15px; right: 10px; left: 10px; } 
    .toast { width: auto; } 
}

/* --- LOGIN MOBILE: KARTEN NEBENEINANDER --- */
@media (max-width: 768px) {
    .login-title { 
        font-size: 32px; /* Titel etwas kleiner, um Platz zu sparen */
        margin-bottom: 25px; 
        letter-spacing: 4px;
    }
    
    .login-cards { 
        flex-direction: row !important; /* Zwingt die Karten nebeneinander */
        flex-wrap: nowrap !important; /* Verhindert den Zeilenumbruch */
        gap: 15px; /* Etwas enger zusammen */
        padding: 0 10px;
    }
    
    .login-card { 
        width: 50%; /* Jede Karte nimmt exakt die halbe Breite ein */
        padding: 15px 5px; 
    }
    
    .login-avatar { 
        width: 90px; /* Kleinere Video-Kreise für's Handy */
        height: 90px; 
        margin-bottom: 12px; 
        border-width: 2px;
    }
    
    .login-card h3 { 
        font-size: 15px; 
    }
    
    .login-card p { 
        font-size: 11px !important; 
        margin-top: 2px;
    }
}

/* --- LOGIN & GAME TRANSITION ANIMATIONS --- */
.anim-login-out {
    animation: portalJump 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    pointer-events: none; /* Verhindert wildes Klicken während der Animation */
}

@keyframes portalJump {
    0% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0px); }
    50% { filter: brightness(1.5) blur(2px); } /* Fängt an magisch zu leuchten */
    100% { opacity: 0; transform: scale(1.2); filter: brightness(3) blur(10px); } /* Zoomt rein und blitzt hell auf */
}

.anim-game-in {
    animation: gameReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes gameReveal {
    0% { opacity: 0; transform: translateY(15px) scale(0.99); }
    100% { opacity: 1; transform: none; } /* <-- WICHTIG: 'none' repariert das fixed Layout! */
}

/* --- PRODUKTION (ACTIVE CLICKER) --- */
#page_production { 
    position: relative; 
    padding: 0 !important; 
    overflow: hidden; 
    display: none; 
    /* NEU: Zwingt die Seite, immer mindestens den ganzen Bildschirm auszufüllen! */
    min-height: calc(100vh - 100px); 
}
#page_production.active { display: flex; flex-direction: column; }

.prod-bg { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; /* Spannt den Hintergrund perfekt auf */
    background-size: cover; 
    background-position: center center; /* Zentriert das quadratische Bild in der Mitte */
    filter: brightness(0.35); 
    z-index: 0; 
    transition: background-image 0.5s ease; 
}

.prod-content { 
    position: relative; z-index: 1; flex: 1; 
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center; /* Zwingt alles schön in die Mitte */
    padding: 40px 20px; 
}
/* Info-Karte oben */
.prod-stats-card { background: rgba(15, 18, 22, 0.85); border: 1px solid var(--primary-gold); border-left: 4px solid var(--primary-gold); border-radius: 8px; padding: 25px; width: 100%; max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); backdrop-filter: blur(8px); margin-bottom: 40px; }
.prod-stats-card h2 { color: #fff; margin-bottom: 15px; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; }
.prod-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.prod-power-highlight { font-size: 28px; font-weight: bold; color: var(--primary-gold); display: block; margin-top: 5px; }

/* Das klickbare Element in der Mitte */
.prod-clicker-area { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; }
.prod-clicker-img { width: 350px; height: 350px; cursor: pointer; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); transition: transform 0.05s ease-out, filter 0.2s ease; user-select: none; -webkit-user-drag: none; }
.prod-clicker-img:active { transform: scale(0.92); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.9)) brightness(1.2); }

/* Aufsteigende Floating-Texte (+1) - VERBESSERT */
.floating-click-text {
    position: fixed;
    font-weight: 900; /* Maximal fett */
    font-size: 32px; /* Größer */
    color: #fff;
    /* Massive Outline für perfekte Sichtbarkeit auf jedem Grund */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px 0px 15px rgba(255,255,255,0.6); 
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Langsamer (2.5s statt 1s) und geschmeidiger */
    animation: floatUpAndFade 2.5s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
    z-index: 9999;
}
.floating-click-text img {
    width: 35px; /* Icon etwas größer */
    height: 35px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.4));
}

@keyframes floatUpAndFade {
    0% { opacity: 1; transform: translateY(0) scale(0.5); }
    10% { transform: translateY(-10px) scale(1.2); } /* Kurzer "Pop"-Effekt */
    /* Bleibt lange sichtbar, bevor es ausfadet */
    70% { opacity: 1; } 
    100% { opacity: 0; transform: translateY(-180px) scale(1); } /* Fliegt weiter nach oben, aber langsamer */
}

@media (max-width: 768px) {
    .prod-clicker-img { width: 280px; height: 280px; }
    .prod-stats-grid { grid-template-columns: 1fr; gap: 10px; }
	
}/* --- MAGIE MODUS EFFEKTE --- */
.prod-clicker-img.magic-mode-active {
    filter: drop-shadow(0 0 40px var(--mana-color)) brightness(1.3) !important;
}

.floating-click-text.magic-text {
    color: #fff;
    text-shadow: 
        -2px -2px 0 var(--mana-color),  
         2px -2px 0 var(--mana-color),
        -2px  2px 0 var(--mana-color),
         2px  2px 0 var(--mana-color),
         0px 0px 25px var(--mana-color); 
}

/* --- RUHMESHALLE --- */
.achievements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.achievement-card { display: flex; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition); }
.achievement-card:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.3); }
.achievement-card.locked { filter: grayscale(1); opacity: 0.5; border-color: transparent; }
.achievement-card.claimed { border-color: var(--fine); opacity: 0.8; background: rgba(46, 204, 113, 0.05); }

.achievement-img { width: 100px; height: 100px; flex-shrink: 0; object-fit: cover; border-right: 1px solid rgba(255,255,255,0.1); }
.achievement-info { padding: 15px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.achievement-info h3 { color: var(--primary-gold); margin-bottom: 5px; font-size: 16px; }
.achievement-info p { color: var(--text-muted); font-size: 12px; line-height: 1.4; margin-bottom: 8px; }
.achievement-reward { font-size: 12px; color: var(--fine); font-weight: bold; }

.achievement-action { padding: 15px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border-left: 1px solid rgba(255,255,255,0.05); width: 140px; text-align: center;}

/* Handy-Ansicht für Ruhmeshalle */
@media (max-width: 1024px) {
    .achievements-grid { grid-template-columns: 1fr; }
    .achievement-action { width: 120px; }
}
@media (max-width: 480px) {
    .achievement-card { flex-direction: column; }
    .achievement-img { width: 100%; height: 120px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .achievement-action { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.05); }
}
/* --- MAGISCHE SCHATZKAMMER --- */
.treasury-container { position: relative; width: 100%; height: 600px; border-radius: 12px; border: 2px solid var(--primary-gold); overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.treasury-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.8) 90%); z-index: 1; }

/* 15-Tage Tracker */
.treasury-streak-tracker { position: relative; z-index: 2; display: flex; gap: 8px; padding: 20px; width: 100%; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.streak-day { width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid var(--text-muted); display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--text-muted); transition: all 0.3s; }
.streak-day.claimed { background: rgba(46, 204, 113, 0.2); border-color: var(--fine); color: var(--fine); box-shadow: 0 0 10px rgba(46, 204, 113, 0.4); }
.streak-day.current { background: rgba(212, 175, 55, 0.3); border-color: var(--primary-gold); color: #fff; box-shadow: 0 0 15px var(--primary-gold); transform: scale(1.1); }
.streak-day.epic { border-color: var(--mana-color); color: var(--mana-color); }

/* Truhe & Animationen */
.treasury-chest-area { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; }
.treasury-chest { width: 250px; height: auto; cursor: pointer; filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.2)); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.treasury-chest.ready { filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.8)); animation: floatChest 3s ease-in-out infinite; }
.treasury-chest.ready:hover { transform: scale(1.05) translateY(-10px); filter: drop-shadow(0 0 60px rgba(212, 175, 55, 1)) brightness(1.2); }
.treasury-chest.cooldown { filter: grayscale(1) brightness(0.5); cursor: not-allowed; }

.treasury-timers { margin-top: 30px; text-align: center; background: rgba(0,0,0,0.8); padding: 15px 30px; border-radius: 8px; border: 1px solid var(--border-color); backdrop-filter: blur(5px); }

@keyframes floatChest { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* Partikel-Effekt beim Öffnen */
.magic-particle { position: fixed; width: 10px; height: 10px; background: var(--primary-gold); border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 15px var(--primary-gold); animation: shootParticle 1s ease-out forwards; }
@keyframes shootParticle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }

/* --- MARKTPLATZ WIZARD --- */
.wizard-header { display: flex; justify-content: space-between; margin-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.wizard-step-tab { flex: 1; text-align: center; color: var(--text-muted); font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); }
.wizard-step-tab.active { color: var(--primary-gold); text-shadow: 0 0 10px rgba(212,175,55,0.5); }
.wizard-content { background: rgba(0,0,0,0.3); padding: 25px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.trade-row { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.5); padding: 12px 15px; margin-bottom: 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.trade-row-img { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; border: 1px solid var(--primary-gold); margin-right: 15px; }
.trade-row-info { flex: 1; font-size: 14px; }
.trade-row-input { display: flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
    .wizard-header { flex-direction: column; gap: 10px; }
    .wizard-step-tab { text-align: left; padding-left: 10px; border-left: 3px solid transparent; }
    .wizard-step-tab.active { border-left-color: var(--primary-gold); }
    
    /* NEU: Cleveres Layout für mobile Zeilen mit sichtbaren Bildern! */
    .trade-row { flex-wrap: wrap; justify-content: flex-start; }
    .trade-row-img { 
        display: block; /* Bilder wieder einblenden! */
        width: 35px; height: 35px; 
        margin-right: 12px; 
    } 
    .trade-row-info { 
        flex: 1; 
        min-width: 150px; /* Sichert ab, dass der Text neben dem Bild bleibt */
    }
    .trade-row-input { 
        width: 100%; 
        justify-content: space-between; 
        margin-top: 12px; 
        border-top: 1px solid rgba(255,255,255,0.05); 
        padding-top: 12px; 
    }
}

/* --- OFFIZIERSTURM --- */
.tower-container { position: relative; width: 100%; height: auto; min-height:600px; border-radius: 12px; border: 2px solid var(--border-color); overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 50px;}
.tower-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.9) 90%); z-index: 1; }

.cooldown-area { position: relative; z-index: 2; margin-top: 30px; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }

/* Offiziers Grid */
.officer-selection-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px; width: 100%; max-width: 1400px; }
.officer-card { background: rgba(0,0,0,0.7); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; align-items: center;}
.officer-card:hover { border-color: var(--primary-gold); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.officer-card.active { border-color: var(--fine); box-shadow: 0 0 20px rgba(46, 204, 113, 0.4); }

/* Sorgt dafür, dass die quadratischen Offizier-Bilder komplett gezeigt werden */
.officer-card-img { 
    width: 100%; 
    height: auto !important; /* Hebt das feste Desktop-Höhen-Limit auf */
    aspect-ratio: 1 / 1; /* Zwingt die Box, quadratisch zu bleiben */
    object-fit: contain !important; /* Zeigt das Bild komplett, ohne Beschneidung (Contain-Modus) */
    background: rgba(0,0,0,0.5); /* Optional: Ein dunkler Hintergrund, falls das Bild nicht die ganze Box ausfüllt */
    border-bottom: 2px solid var(--border-color); 
}
.officer-card.active .officer-card-img { border-bottom-color: var(--fine); }

.officer-card-body { padding: 15px; text-align: center; display:flex; flex-direction: column; flex-grow:1;}
.officer-card h3 { color: var(--primary-gold); margin-top: 0; margin-bottom: 5px; font-size: 18px; }
.officer-card.active h3 { color: var(--fine); }
.officer-card-lore { font-style: italic; color: var(--text-muted); font-size: 12px; margin-bottom: 10px; line-height: 1.4; flex-grow: 1;}
.officer-card-bonuses { font-size: 13px; color: #fff; line-height: 1.5; margin-bottom: 15px;}

.officer-card-action { width: 100%; padding: 15px; border-top: 1px solid var(--border-color); display:flex; justify-content:center;}

/* Mobilansicht */
@media (max-width: 1100px) { .officer-selection-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 20px; } }

@media (max-width: 768px) {
    .officer-selection-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
    .tower-container { min-height: auto; }
    .officer-card-img {}
    #throne_character_area { flex-direction: column; align-items: center; }
}

/* =========================================
   THRONSAAL UI POLISHING (Lord & Offizier)
   ========================================= */

/* Der Haupt-Container für beide Boxen */
.throne-character-header { 
    display: flex; 
    gap: 25px; 
    margin-bottom: 35px; 
    width: 100%; 
    grid-column: 1 / -1; 
}

/* Basis-Styles für die Lord-Box */
.throne-lord-box {
    display: flex;
    gap: 25px;
    align-items: center; /* Zentriert Bild und Text vertikal */
    margin-bottom: 0 !important;
}

.throne-lord-avatar {
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border: 3px solid var(--primary-gold); 
    object-fit: cover;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.throne-lord-info {
    flex: 1;
}

.throne-lord-info h2 {
    margin-bottom: 15px; 
    border: none; 
    padding: 0;
    font-size: 26px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.throne-leaderboard {
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 100%;
    max-width: 350px;
}

/* Basis-Styles für die Offizier-Box */
.throne-officer-box {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Offizier in der Höhe */
}

/* --- DESKTOP ANSICHT --- */
@media (min-width: 1025px) {
    .throne-character-header {
        flex-direction: row; 
        align-items: stretch; /* Zwingt beide Boxen auf exakt dieselbe Höhe */
    }
    
    .throne-lord-box {
        flex: 2; /* Lord nimmt 2/3 des Platzes ein */
    }
    
    .throne-officer-box {
        flex: 1; /* Offizier nimmt 1/3 ein */
        max-width: 320px; 
    }
}

/* --- MOBILE & TABLET ANSICHT --- */
@media (max-width: 1024px) {
    .throne-character-header {
        flex-direction: column; 
        gap: 20px; 
    }
    
    .throne-lord-box {
        flex-direction: column; /* Bild rutscht über den Text */
        text-align: center;
        padding: 30px 20px;
    }
    
    .throne-leaderboard {
        margin: 0 auto; /* Zentriert das Leaderboard auf dem Handy */
    }
    
    .throne-officer-box {
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================
   VIDEO-SPARMODUS (Toggled via JS)
   ========================================= */

/* Versteckt alle Videos rigoros */
body.disable-videos video {
    display: none !important;
}

/* Zeigt das Bild an, das direkt auf ein Video folgt (Karten, Taverne, Login) */
body.disable-videos video + img {
    display: block !important;
}

/* Fallback für den Login-Hintergrund (Da dieser kein direktes <img> hat) */
body.disable-videos .login-overlay {
    background: url('images/Background/Burg Hintergrund-landscape.jpg') no-repeat center center;
    background-size: cover;
}

/* Mobile Login-Hintergrund (Hochformat) */
@media (max-aspect-ratio: 1/1) {
    body.disable-videos .login-overlay {
        background-image: url('images/Background/Burg Hintergrund-portrait.jpg');
    }
}

/* =========================================
   MAGISCHES GLÜCKSPIEL (SLOTS)
   ========================================= */
.slots-machine-frame {
    display: inline-block; padding: 15px;
    background: linear-gradient(135deg, #2c3e50, #000);
    border: 4px solid var(--primary-gold); border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    max-width: 95vw; 
    box-sizing: border-box;
    /* NEU: Scrollen erlauben, falls es eng wird, aber Scrollbar unsichtbar machen */
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.slots-machine-frame::-webkit-scrollbar { display: none; }

.slots-machine {
    display: flex; gap: 8px; background: #050505; padding: 8px;
    border-radius: 8px; border: 2px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 20px 30px rgba(0,0,0,0.8); overflow: hidden;
    /* NEU: Zwingt alle Walzen in eine Zeile */
    flex-wrap: nowrap !important; 
}

.slots-reel {
    width: 100px; height: 300px; background: #111; overflow: hidden;
    position: relative; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05);
    /* NEU: Verbietet das "Zusammenquetschen" auf Handys */
    flex-shrink: 0 !important; 
}
.slots-strip { display: flex; flex-direction: column; width: 100%; }
.slot-symbol { width: 100px; height: 100px; padding: 12px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.6)); transition: all 0.3s; }
.slot-symbol.dimmed { filter: brightness(0.2) grayscale(0.8); }
.slot-symbol.highlight { animation: symbolWinPulse 0.8s infinite alternate; background: rgba(212, 175, 55, 0.2); border-radius: 12px; box-shadow: inset 0 0 20px var(--primary-gold); z-index: 10; }

@keyframes symbolWinPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 10px var(--primary-gold)) brightness(1.2); }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 25px var(--primary-gold)) brightness(1.5); }
}

.slots-flash {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(46, 204, 113, 0.3); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s; 
    border-radius: 16px; /* Angepasst an den Rahmen */
}
.slots-flash.active { opacity: 1; }

.slots-win-notification {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
    background: rgba(0,0,0,0.95); border: 3px solid var(--fine); color: var(--fine);
    padding: 20px 40px; font-size: 36px; font-weight: bold; border-radius: 16px;
    z-index: 300; /* 300 erzwingt, dass der Text IMMER ganz oben schwebt */
    opacity: 0; pointer-events: none; text-align: center;
    text-shadow: 0 0 20px var(--fine); box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 30px rgba(46, 204, 113, 0.4);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.slots-win-notification.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- SLOT OVERDRIVE (Teaser Spin) --- */
.slots-machine.teaser-active .slots-reel {
    filter: brightness(0.3) grayscale(0.6);
    transition: filter 0.5s ease;
}
.slots-machine.teaser-active .slots-reel.teaser-target {
    filter: brightness(1.2) drop-shadow(0 0 20px var(--mana-color));
    border-color: var(--mana-color);
    box-shadow: inset 0 0 30px var(--mana-color);
    z-index: 10;
}

/* =========================================
   RESPONSIVE MAGISCHES CASINO & TAVERNE
   ========================================= */

.tavern-window-wrap {
    width: min(100%, 720px);
    margin: 0 auto;
}

.tavern-window {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(212, 175, 55, 0.55);
    border-radius: 8px;
    overflow: hidden;
    background: #050403;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}

.tavern-window-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tavern-hotspot {
    position: absolute;
    width: clamp(32px, 6vw, 54px);
    height: clamp(32px, 6vw, 54px);
    padding: 0;
    border: 1px solid rgba(255,255,255,0.52);
    border-radius: 50%;
    background: rgba(212,175,55,0.18);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.28), 0 0 18px rgba(212,175,55,0.48);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.tavern-hotspot:hover,
.tavern-hotspot:focus-visible {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(212,175,55,0.36);
    box-shadow: 0 0 0 5px rgba(0,0,0,0.36), 0 0 26px rgba(212,175,55,0.72);
    outline: none;
}

.tavern-hotspot span {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: rgba(212,175,55,0.68);
    box-shadow: inset 0 0 8px rgba(255,255,255,0.38);
}

.tavern-hotspot::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(212,175,55,0.32);
    border-radius: 50%;
    animation: tavernHotspotPulse 1.8s ease-out infinite;
}

.tavern-hotspot-events { left: 39.0625%; top: 57.6172%; }
.tavern-hotspot-slots { left: 78.125%; top: 27.832%; }
.tavern-hotspot-aethelcard { left: 87.8906%; top: 80.5664%; }

@keyframes tavernHotspotPulse {
    0% { transform: scale(0.75); opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 768px) {
    /* Tavernen-Karte: Bild, Text und Button untereinander stapeln */
    .casino-invite-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 25px 15px !important;
    }
    .casino-invite-card img {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto;
    }
    .casino-invite-card button {
        width: 100% !important;
    }

    /* Slots anpassen (Tablets & große Handys) */
    .slots-reel { width: 70px; height: 210px; }
    .slot-symbol { width: 70px; height: 70px; padding: 8px; }
    .slots-win-notification { font-size: 24px; padding: 15px 25px; width: 90%; }
}

@media (max-width: 480px) {
    /* --- NEUE RESPONSIVE SLOTS (Dynamisches Schrumpfen) --- */
    .slots-machine-frame {
        max-width: 98vw; padding: 5px; 
        box-sizing: border-box; 
        overflow: hidden; /* Scrollen verhindern */
        display: flex; justify-content: center;
    }
    .slots-machine {
        gap: 2px; padding: 2px;
        flex-wrap: nowrap !important; /* Zwingt alles in eine Zeile */
        width: 100%;
        justify-content: space-evenly;
    }
    .slots-reel {
        /* WICHTIG: Die Walzen dürfen jetzt schrumpfen */
        width: calc(100% / 5.2 - 2px); /* Ca. 1/5 oder 1/6 Breite */
        height: auto;
        aspect-ratio: 1 / 3; /* Behält das 1:3 Verhältnis bei */
        flex-shrink: 1 !important; /* Erlaubt das Verkleinern */
        flex-grow: 1;
        border-width: 1px;
    }
    /* Die Bilder innerhalb der Walzen müssen sich anpassen */
    .slots-strip img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
    .slots-spin-row {
        margin-top: 15px !important; gap: 10px !important;
    }
    
    /* Overlay Anpassungen (schon vorhanden) */
    .fs-selection-overlay h2 { font-size: 18px !important; margin-bottom: 10px !important; }
    .fs-selection-overlay p { font-size: 12px !important; margin-bottom: 10px !important; }
    .fs-selection-overlay img { width: 70px !important; height: 70px !important; }
}

/* --- JACKPOT & MEGA WIN --- */
.slots-jackpot-container {
    background: linear-gradient(180deg, #111, #333);
    border: 3px solid var(--primary-gold);
    border-radius: 12px;
    padding: 15px;
    margin: 0 auto 30px auto;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), inset 0 0 15px #000;
    text-align: center;
    animation: jackpotPulse 2s infinite alternate;
}
.slots-jackpot-title {
    color: var(--primary-gold); font-size: 14px; font-weight: bold; letter-spacing: 3px; margin-bottom: 5px;
}
.slots-jackpot-amount {
    color: #fff; font-size: 36px; font-weight: 900; text-shadow: 0 0 15px var(--primary-gold);
}
@keyframes jackpotPulse {
    0% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 15px #000; }
    100% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.6), inset 0 0 15px #000; }
}

.slots-mega-win {
    animation: megaWinShake 0.5s infinite;
    color: #f1c40f !important;
    text-shadow: 0 0 30px #f1c40f, 0 0 50px #fff !important;
    transform: translate(-50%, -50%) scale(1.5) !important;
}
@keyframes megaWinShake {
    0% { transform: translate(-50%, -50%) scale(1.5) rotate(-2deg); }
    50% { transform: translate(-50%, -50%) scale(1.6) rotate(2deg); }
    100% { transform: translate(-50%, -50%) scale(1.5) rotate(-2deg); }
}

/* Paytable & Leaderboard Table */
.slots-table { width: 100%; border-collapse: collapse; margin-top: 15px; text-align: center; }
.slots-table th { background: rgba(212, 175, 55, 0.2); color: var(--primary-gold); padding: 10px; border: 1px solid rgba(255,255,255,0.1); }
.slots-table td { padding: 10px; border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.slots-table img { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }

/* --- FREISPIELE & STICKY SYMBOLS --- */
.free-spins-header {
    background: rgba(0,0,0,0.8); border-bottom: 2px solid var(--mana-color);
    padding: 15px; font-size: 18px; font-weight: bold; margin-bottom: 20px;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); text-transform: uppercase;
}

.sticky-overlay {
    position: absolute; width: 100px; height: 100px; padding: 12px;
    object-fit: contain; left: 0; z-index: 20; display: none;
    filter: drop-shadow(0 0 15px var(--mana-color)) brightness(1.2);
    background: rgba(155, 89, 182, 0.25); border-radius: 8px;
    border: 2px solid var(--mana-color);
}

.fs-selection-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95); 
    z-index: 200; /* Liegt über den Walzen (1) und dem Blitz (50), aber UNTER dem Gewinntext (300) */
    border-radius: 16px; /* Passt perfekt in den Rahmen */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border: 3px solid var(--mana-color); box-shadow: inset 0 0 50px var(--mana-color);
}
.fs-selection-overlay h2 { color: var(--mana-color); margin-bottom: 30px; animation: pulseWin 1s infinite alternate; font-size: 24px; text-align: center; }
.fs-selection-overlay img { width: 150px; height: 150px; filter: drop-shadow(0 0 30px var(--primary-gold)); }

@keyframes pulseWin {
    0% { transform: scale(1); text-shadow: 0 0 10px var(--mana-color); }
    100% { transform: scale(1.05); text-shadow: 0 0 25px var(--mana-color); }
}

@media (max-width: 768px) {
    .sticky-overlay { width: 70px; height: 70px; padding: 8px; }
    .fs-selection-overlay img { width: 100px; height: 100px; }
    .free-spins-header { font-size: 14px; }
}
@media (max-width: 480px) {
    .sticky-overlay { width: 55px; height: 55px; padding: 5px; }
}
/* --- ITEM SHOP & RUCKSACK --- */
.item-card {
    background: rgba(25, 31, 38, 0.9); border: 2px solid; border-radius: 8px;
    padding: 20px; text-align: center; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.7);
    display: flex; flex-direction: column;
}
.item-card.sold-out { filter: grayscale(1) brightness(0.5); pointer-events: none; }
.item-sold-stamp {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg);
    color: #e74c3c; border: 4px solid #e74c3c; font-size: 28px; font-weight: bold;
    padding: 10px 20px; border-radius: 8px; z-index: 10; text-shadow: 0 0 10px #000; box-shadow: 0 0 15px rgba(231,76,60,0.5);
}
.item-img { width: 120px; height: 120px; margin: 0 auto 15px auto; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.6)); }
.item-rarity { font-size: 11px; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; }
.item-title { color: #fff; font-size: 18px; margin-bottom: 10px; }
.item-desc { color: var(--text-muted); font-size: 13px; line-height: 1.5; flex-grow: 1; margin-bottom: 15px; }

/* --- SHOP GIMMICKS & VERKÄUFERIN --- */
.shop-intro-container {
    position: relative; width: 100%; height: 75vh; min-height: 550px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    overflow: hidden; border-radius: 12px; border: 2px solid var(--fine);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.shop-intro-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; filter: brightness(0.4);
}
.shopkeeper-breathe {
    position: relative; z-index: 5;
    max-height: 85%; max-width: 95%; object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(0,0,0,0.9));
    animation: breatheAnim 4s infinite ease-in-out;
    transform-origin: bottom center;
}
.shop-speech-bubble {
    position: absolute; z-index: 10;
    top: 50px; /* Desktop: Abstand vom oberen Rand */
    left: 50%; transform: translateX(-50%) translateY(20px); /* MITTIG ZENTRIERT */
    max-width: 300px; width: max-content;
    background: #fff; color: #000; padding: 15px 25px; border-radius: 15px;
    font-size: 16px; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.5s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}
.shop-speech-bubble.show {
    opacity: 1; transform: translateX(-50%) translateY(0); /* ZENTRIERT BLEIBEN */
}
/* Dreieck an der Sprechblase (Mitte unten) */
.shop-speech-bubble::after {
    content: ''; position: absolute; bottom: -15px;
    left: 50%; transform: translateX(-50%); /* MITTIG UNTEN */
    border-width: 15px 15px 0 15px; border-style: solid; border-color: #fff transparent transparent transparent;
}
.shop-enter-btn {
    position: relative; z-index: 10; margin-bottom: 30px; padding: 15px 40px;
    font-size: 20px; border-color: var(--fine); color: var(--fine);
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); transition: all 0.3s;
}
.shop-enter-btn:hover { background: var(--fine); color: #000; transform: scale(1.05); }

/* Atem-Animation für Desktop (Normal) */
@keyframes breatheAnim {
    0% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.02) scaleX(0.99); }
    100% { transform: scaleY(1) scaleX(1); }
}

/* --- MOBIL OPTIMIERUNG (Schwarzmarkt) --- */
@media (max-width: 768px) {
    .shop-intro-container {
        height: 90vh; /* Imposante Höhe für große Darstellung */
        min-height: none;
    }

    .shopkeeper-breathe {
        position: absolute;
        bottom: -15px; /* Passt den Abstand unten für Handy-Schatten an */

        /* --- NEUE ULTRAROBURSTE ZENTRIERUNG --- */
        left: 0; right: 0; /* Nimmt die volle Breite ein */
        margin-left: auto; margin-right: auto; /* Zwingt das Element absolut in die Mitte */

        /* Bild-Skalierung auf Handys optimiert */
        height: 90%; width: auto; /* Skaliert anhand der Höhe, Breite passt sich automatisch an (Seitenverhältnis) */
        max-width: 140%; /* Erlaubt imposante Breite, die leicht überlappen darf */
        max-height: none;
        
        object-fit: contain;
        transform-origin: bottom center;
        
        /* Wir nutzen die Standard-Atem-Animation, da diese kein translateX verwendet */
        animation: breatheAnim 4s infinite ease-in-out;
        transform: scale(1); /* Initial-Status ohne Translation */
    }
    
    .shop-speech-bubble {
        top: 20px; /* Auf Handy näher am oberen Rand */
        font-size: 14px; padding: 10px 15px; max-width: 90%; width: max-content;
        /* Behält die mittige Zentrierung bei */
        left: 50%; transform: translateX(-50%) translateY(20px);
    }
    .shop-speech-bubble.show {
         transform: translateX(-50%) translateY(0);
    }
    .shop-speech-bubble::after {
        content: ''; position: absolute; bottom: -15px;
        left: 50%; transform: translateX(-50%); /* MITTIG UNTEN */
        border-width: 15px 15px 0 15px; border-style: solid; border-color: #fff transparent transparent transparent;
    }
    .shop-enter-btn {
        margin-bottom: 80px; padding: 12px 30px; font-size: 16px; width: 80%;
    }
}

/* --- ONLINE STATUS PUNKT --- */
.online-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background-color: var(--fine); box-shadow: 0 0 8px var(--fine);
    animation: pulseOnline 2s infinite;
}
@keyframes pulseOnline {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- MYTHISCHER SLOT MODUS --- */
.mythic-toggle-container { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(231,76,60,0.3); }
.mythic-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.mythic-switch input { opacity: 0; width: 0; height: 0; }
.mythic-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 24px; border: 1px solid rgba(255,255,255,0.2); }
.mythic-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.mythic-switch input:checked + .mythic-slider { background-color: #e74c3c; box-shadow: 0 0 15px #e74c3c; }
.mythic-switch input:checked + .mythic-slider:before { transform: translateX(24px); }


/* Versteckte 6. Walze - Darf absolut 0 Platz einnehmen! */
.mythic-reel-hidden { 
    width: 0 !important; 
    opacity: 0; 
    padding: 0 !important; 
    margin: 0 !important; 
    border: none !important; 
    overflow: hidden;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

.mythic-reel-active { 
    width: 100px; opacity: 1; padding: 8px; margin-left: 8px; 
    border: 1px solid rgba(255,255,255,0.05); 
}

/* Episches UI für Mega Free Games */
.slots-machine-frame.epic-mode {
    border-color: #e74c3c;
    box-shadow: 0 15px 50px rgba(231,76,60,0.6), inset 0 0 40px rgba(231,76,60,0.5);
    background: linear-gradient(135deg, #4a0000, #000);
}
.slots-machine.epic-mode {
    border-color: rgba(231,76,60,0.5);
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(231,76,60,0.3);
}

@media (max-width: 768px) {
    .mythic-reel-active { width: 70px; padding: 8px; }
}
@media (max-width: 480px) {
    .mythic-reel-active { width: 55px; padding: 5px; margin-left: 4px; }
}

/* --- MOBILE FIX: MEGA FREISPIELE ZENTRIERUNG --- */

/* Verhindert, dass der Rahmen breiter als das Display wird */
.slots-machine-frame {
    max-width: 95vw; 
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* Tablet & große Handys: Kompakt & Zentriert */
    .slots-reel { width: 60px !important; height: 180px !important; }
    .slot-symbol { width: 60px !important; height: 60px !important; padding: 6px !important; }
    .sticky-overlay { width: 60px !important; height: 60px !important; padding: 6px !important; }
    .mythic-reel-active { width: 60px !important; padding: 4px !important; margin-left: 5px !important; }
    
   /* Zwingt die Walzen in die absolute Mitte des Rahmens */
    .slots-machine { 
        justify-content: center !important; 
        gap: 5px !important; 
        padding: 6px !important; 
        width: max-content !important; /* Zwingt den Container, sich um den Inhalt zu schließen */
        margin: 0 auto; /* Zentriert den Container selbst */
    }
}

@media (max-width: 480px) {
    /* Kleine Handys: Kompakt & Zentriert */
    .slots-reel { width: 46px !important; height: 138px !important; }
    .slot-symbol { width: 46px !important; height: 46px !important; padding: 4px !important; }
    .sticky-overlay { width: 46px !important; height: 46px !important; padding: 4px !important; }
    .mythic-reel-active { width: 46px !important; padding: 3px !important; margin-left: 3px !important; }
    
    /* Zwingt die Walzen in die absolute Mitte des Rahmens */
    .slots-machine { 
        justify-content: center !important; /* <--- DAS IST DIE WICHTIGE ÄNDERUNG! */
        gap: 3px !important; 
        padding: 4px !important; 
    }
    .slots-machine-frame { padding: 6px !important; border-width: 2px !important; }
	/* NEU: Verhindert, dass das Freispiel-Menü den Rahmen auf Handys sprengt */
    .fs-selection-overlay h2 { font-size: 18px !important; margin-bottom: 10px !important; }
    .fs-selection-overlay p { font-size: 12px !important; margin-bottom: 10px !important; }
    .fs-selection-overlay img { width: 70px !important; height: 70px !important; }
}

/* --- ALCHEMIELABOR --- */
.alch-card { cursor: pointer; text-align: center; border: 2px solid transparent; transition: all 0.3s; width: 160px; padding: 20px 10px; }
.alch-card:hover { border-color: var(--mana-color); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(155,89,182,0.3); background: rgba(155,89,182,0.05); }
.alch-crucible { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.5); padding: 30px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: 20px;}
.alch-side { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 140px;}
.alch-side img { width: 90px; height: 90px; border-radius: 8px; border: 2px solid var(--primary-gold); object-fit: cover; }
.alch-center { flex: 0.5; display: flex; justify-content: center; }
.alch-arrow { font-size: 60px; color: var(--mana-color); animation: pulseArrow 1.5s infinite; text-shadow: 0 0 20px var(--mana-color); }

@keyframes pulseArrow {
    0% { transform: scale(1) translateX(-5px); opacity: 0.7; }
    50% { transform: scale(1.1) translateX(5px); opacity: 1; text-shadow: 0 0 35px var(--mana-color); }
    100% { transform: scale(1) translateX(-5px); opacity: 0.7; }
}
@media (max-width: 600px) {
    .alch-crucible { flex-direction: column; }
    .alch-arrow { transform: rotate(90deg) !important; animation: none; margin: 15px 0; }
}

/* --- MACHT-ANALYSE (DIAGRAMME) --- */
.score-tabs { 
    display: flex; gap: 10px; margin-bottom: 20px; 
    border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 10px; 
    overflow-x: auto; scrollbar-width: none; 
}
.score-tabs::-webkit-scrollbar { display: none; }
.score-tab-btn { 
    background: none; border: none; color: var(--text-muted); 
    font-size: 14px; font-weight: bold; text-transform: uppercase; 
    cursor: pointer; padding: 5px 10px; border-bottom: 2px solid transparent; 
    transition: var(--transition); white-space: nowrap; 
}
.score-tab-btn.active { color: var(--primary-gold); border-bottom-color: var(--primary-gold); }

.score-bar-container { display: flex; align-items: center; margin-bottom: 12px; gap: 10px; }
.score-bar-label { 
    width: 140px; font-size: 13px; color: var(--text-main); 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.score-bar-track { 
    flex: 1; height: 12px; background: rgba(0,0,0,0.5); 
    border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);
}
.score-bar-fill { height: 100%; border-radius: 6px; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.score-bar-value { width: 70px; text-align: right; font-size: 13px; font-weight: bold; color: var(--fine); }

@media (max-width: 480px) {
    .score-bar-label { width: 100px; font-size: 11px; }
    .score-bar-value { width: 50px; font-size: 11px; }
    .score-tab-btn { font-size: 12px; padding: 5px; }
}

/* =========================================
   LISTEN & RASTER ANSICHT (TOGGLE)
   ========================================= */

/* Anpassungen für Standard (Raster) */
.build-card { display: flex; flex-direction: column; }
.card-content { padding: 25px 25px 0 25px; } 
.card-expanded-panel { padding: 0 25px; flex: 1; display: flex; flex-direction: column; } 
.card-footer-clean { padding: 25px; }
.list-lvl-badge { display: none !important; }
.btn-info-toggle { display: none !important; }

/* Listen-Ansicht Overrides */
.card-grid.list-view { grid-template-columns: 1fr; gap: 15px; }
.card-grid.list-view .build-card { 
    display: grid; 
    grid-template-columns: 70px 1fr; 
    grid-template-rows: auto auto auto; 
    gap: 0 15px; 
    padding: 15px; 
}
.card-grid.list-view .card-image-wrapper { 
    grid-column: 1; grid-row: 1; 
    width: 70px; height: 70px; padding: 0; 
    border: 2px solid var(--primary-gold); border-radius: 8px; 
}
.card-grid.list-view .card-level-badge { display: none; }

.card-grid.list-view .card-content { 
    grid-column: 2; grid-row: 1; padding: 0; 
    display: flex; flex-direction: column; justify-content: center; 
}
.card-grid.list-view .card-type { display: none; }
.card-grid.list-view .card-header-clean h3 { font-size: 16px; margin: 0; }
.card-grid.list-view .list-lvl-badge { display: inline-block !important; }

/* Info Button */
.btn-info-toggle { 
    background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); 
    border-radius: 4px; color: var(--primary-gold); font-size: 12px; 
    cursor: pointer; padding: 6px 12px; font-weight: bold; transition: var(--transition); 
}
.btn-info-toggle:hover { background: rgba(212, 175, 55, 0.2); }
.card-grid.list-view .btn-info-toggle { display: inline-block !important; margin-left: auto; }

/* Aufklappbares Panel in der Listenansicht */
.card-grid.list-view .card-expanded-panel { 
    grid-column: 1 / -1; grid-row: 2; 
    display: none; padding: 15px 0 0 0; margin-top: 15px; 
    border-top: 1px dashed rgba(255,255,255,0.1); 
}
.card-grid.list-view .card-expanded-panel.open { display: block; animation: fadeIn 0.3s ease; }

/* Aktions-Button unten */
.card-grid.list-view .card-footer-clean { 
    grid-column: 1 / -1; grid-row: 3; padding: 0; width: 100%; margin-top: 15px; 
}

/* =========================================
   WELTKARTE & ERKUNDUNG (FENSTER MODUS)
   ========================================= */

.map-window-frame {
    position: relative;
    width: 100%;
    max-width: 800px; /* Begrenzt die Maximalgröße */
    margin: 0 auto; /* Zentriert das Quadrat */
    aspect-ratio: 1 / 1; /* Macht es auf dem Desktop quadratisch! */
    border: 3px solid var(--primary-gold);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    background: #050505;
}

.map-ui-layer {
    position: absolute; top: 15px; left: 15px; right: 15px;
    z-index: 1000;
    display: flex; justify-content: space-between; align-items: flex-start;
    pointer-events: none; 
}
.map-ui-layer button, .map-ui-layer div { pointer-events: auto; }

.map-viewport {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    overflow: hidden; cursor: grab; touch-action: none; z-index: 100;
}
.map-viewport:active { cursor: grabbing; }

.map-container { width: 2048px; height: 2048px; position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.map-container img#worldmap_img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.map-marker { position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 200; display: flex; flex-direction: column; align-items: center; }
.marker-pin { width: 35px; height: 45px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23d4af37" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') no-repeat center center; background-size: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8)); transition: all 0.2s; }
.map-marker:hover .marker-pin { transform: scale(1.2) translateY(-5px); }
.marker-label { background: rgba(0,0,0,0.8); color: var(--primary-gold); padding: 5px 10px; border-radius: 4px; border: 1px solid var(--primary-gold); font-size: 14px; font-weight: bold; margin-top: 5px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; white-space: nowrap; }
.map-marker:hover .marker-label { opacity: 1; transform: translateY(0); }

.map-cloud { position: absolute; pointer-events: none; z-index: 150; animation: cloudDrift linear infinite; }
@keyframes cloudDrift { 0% { transform: translateX(0); } 100% { transform: translateX(2500px); } }

/* =========================================
   3x3 ERKUNDUNGS-MODUS
   ========================================= */

.subarea-viewport { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 500; }
.subarea-grid-container { position: relative; width: 90%; max-width: 600px; max-height: 90%; aspect-ratio: 1 / 1; border: 3px solid var(--primary-gold); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.9); background: #111; }
.subarea-grid-container img { width: 100%; height: 100%; object-fit: cover; animation: slowZoom 20s infinite alternate linear; }
@keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

/* ELEGANT CSS CHEVRONS (Pfeile) */
.subarea-nav-btn {
    position: absolute; width: 50px; height: 50px; background: rgba(0,0,0,0.6); border: 2px solid var(--primary-gold); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; backdrop-filter: blur(5px); transition: all 0.2s ease; z-index: 10;
}
.subarea-nav-btn::after {
    content: ''; display: block; width: 12px; height: 12px;
    border-top: 3px solid var(--primary-gold); border-right: 3px solid var(--primary-gold);
    transition: inherit;
}
.subarea-nav-btn:hover { background: var(--primary-gold); box-shadow: 0 0 15px var(--primary-gold); }
.subarea-nav-btn:hover::after { border-color: #000; }

.nav-up { top: 15px; left: 50%; transform: translateX(-50%); }
.nav-up::after { transform: translateY(3px) rotate(-45deg); }
.nav-down { bottom: 15px; left: 50%; transform: translateX(-50%); }
.nav-down::after { transform: translateY(-3px) rotate(135deg); }
.nav-left { top: 50%; left: 15px; transform: translateY(-50%); }
.nav-left::after { transform: translateX(3px) rotate(-135deg); }
.nav-right { top: 50%; right: 15px; transform: translateY(-50%); }
.nav-right::after { transform: translateX(-3px) rotate(45deg); }

.subarea-radar { position: absolute; bottom: 15px; right: 15px; background: rgba(0,0,0,0.8); border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 6px; color: var(--text-muted); font-family: monospace; font-size: 14px; z-index: 10; }
#subarea_sector_display { color: var(--primary-gold); font-weight: bold; font-size: 16px; margin-left: 5px; }

@media (max-width: 768px) {
    .map-window-frame { 
        aspect-ratio: auto; /* Hebt das Desktop-Quadrat auf */
        height: calc(100vh - 200px); /* Nutzt den Hochkant-Platz perfekt aus */
        border-width: 2px; 
    }
    .map-ui-layer { top: 10px; right: 10px; left: 10px; }
    .subarea-nav-btn { width: 44px; height: 44px; }
    .subarea-nav-btn::after { width: 10px; height: 10px; }
}

/* =========================================
   MINI MUSIK PLAYER
   ========================================= */
.music-player-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    background: rgba(15, 18, 22, 0.95);
    border: 2px solid var(--primary-gold);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.9);
    z-index: 9999;
    transition: all 0.3s ease;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.music-player-container.hidden {
    display: none;
}

.music-player-container.minimized {
    height: 45px; /* Zeigt nur noch den Header */
}

.music-header {
    background: rgba(212, 175, 55, 0.1);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    font-size: 14px;
    color: var(--primary-gold);
    font-weight: bold;
    user-select: none;
}
.music-header:hover { background: rgba(212, 175, 55, 0.2); }

/* Für zu lange Tracknamen */
.scrolling-text {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-body {
    padding: 15px;
}

.music-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.btn-music {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-music:hover { color: var(--primary-gold); transform: scale(1.1); }
.btn-music.play-btn { font-size: 24px; color: var(--primary-gold); }

.music-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.volume-slider {
    flex: 1;
    cursor: pointer;
    accent-color: var(--primary-gold); /* Funktioniert in modernen Browsern für schnelles Styling */
}

@media (max-width: 768px) {
    .music-player-container {
        bottom: 70px; /* Platz für mobile Navigation lassen */
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* =========================================
   AETHELCARD - KARTEN STYLING & EFFEKTE
   ========================================= */

.ac-container:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
}

.ac-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Klicks gehen durch die Bilder hindurch */
}

/* Layer 1: Element Hintergrund */
.ac-bg { z-index: 1; }

/* Layer 2: Artwork (Positioniert auf exakt x187 y328 bis x650 y788) */
.ac-art {
    z-index: 2;
    left: 22.476%;  /* 187 / 832 */
    top: 26.282%;   /* 328 / 1248 */
    width: 55.649%; /* (650-187) / 832 */
    height: 36.859%;/* (788-328) / 1248 */
    object-fit: cover;
}

/* Layer 3: Artwork Glanzeffekt (Rare, Epic, Ultimate) */
.ac-foil-art {
    z-index: 3;
    left: 22.476%; top: 26.282%; width: 55.649%; height: 36.859%;
    pointer-events: none;
    background-size: 200% 200%;
}

/* Layer 4: Kartenbasis (Rahmen mit Cutout) */
.ac-frame { z-index: 4; }

/* Layer 5: Karten-Overlay Glanzeffekt (Epic, Ultimate) */
.ac-foil-card {
    z-index: 5;
    background-size: 200% 200%;
    mix-blend-mode: color-dodge; 
}

/* Layer 6: Text */
.ac-text-layer { z-index: 6; }

/* --- KARTEN BASIS-STYLES --- */
.ac-container {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 832 / 1248; 
    border-radius: 1.2cqw; /* Standard-Radius für alle kleinen/mittleren Ansichten */
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background: #111; 
    overflow: hidden;
}

/* Dynamischer Radius für den Zoom-Modus (wird weicher) */
.ac-zoom-container .ac-container {
    border-radius: 2.2cqw;
}

/* --- TEXT POSITIONIERUNG (ALLGEMEIN) --- */
.ac-name {
    position: absolute;
    top: 12%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    color: #fff;
    font-family: serif;
    font-size: 6.5cqw; 
    font-weight: bold;
    text-shadow: 1px 1px 3px #000, -1px -1px 0 #000;
}

/* Basis für den Effekt-Text (Position wird spezifisch für Einheiten/Zauber geregelt) */
.ac-effect {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%; /* Bleibt immer strikt innerhalb des Rahmens */
    text-align: center;
    line-height: 1.3;
}

/* --- SPEZIFISCHE STYLES FÜR ZAUBERKARTEN --- */
.ac-spell .ac-effect {
    top: 80.25%;
    color: #ffffff;
    font-weight: 500;
    font-size: 3.8cqw;
    text-shadow: 0px 0px 6px #000, -1px -1px 0 #000;
}

/* Der automatische Fallback für extrem lange Zauber-Texte (ab 160 Zeichen) */
.ac-spell .ac-effect.ac-text-long {
    font-size: 3.1cqw;
    line-height: 1.15;
    /* Breite bleibt hier weggelassen, damit er die 75% von .ac-effect erbt! */
}

/* --- SPEZIFISCHE STYLES FÜR EINHEITENKARTEN --- */
.ac-unit .ac-effect {
    top: 90%;
    color: #ffffff;
    font-weight: 500;
    font-size: 3.8cqw;
    text-shadow: 0px 0px 6px #000, -1px -1px 0 #000;
}

/* Klickbarer Text für das 🛈 Icon */
.ac-effect-clickable {
    pointer-events: auto; /* Erlaubt Klicks trotz ac-layer */
    cursor: help;
    transition: color 0.2s ease;
}
.ac-effect-clickable:hover {
    color: var(--primary-gold);
}
/* --- Das bombensichere Info-Icon (Apple/iOS safe) --- */
.ac-info-icon {
    display: inline-block;
    width: 3.5cqw;
    height: 3.5cqw;
    line-height: 3.5cqw;
    border: 1px solid var(--primary-gold);
    border-radius: 50%;
    color: var(--primary-gold);
    font-family: serif;
    font-size: 2.5cqw;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    vertical-align: middle;
    margin-left: 2px;
    background: rgba(0,0,0,0.5);
    text-shadow: none; /* Hebt den Textschatten auf, damit das "i" knackscharf bleibt */
}

/* Das dunkle Popup für die langen Texte */
.ac-effect-popup {
    position: absolute;
    bottom: 2%; /* Positioniert es ganz unten über dem Textfeld */
    left: 2.5%;
    width: 95%; /* Fast so breit wie die Karte */
    background: rgba(12, 14, 18, 0.98);
    border: 1px solid var(--primary-gold);
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    z-index: 20; /* Liegt sicher über Text und Stats */
    box-shadow: 0 10px 25px rgba(0,0,0,0.9);
    pointer-events: auto; /* Fängt den Klick fürs Schließen ab */
    animation: popupFadeIn 0.2s ease forwards;
}

.ac-effect-popup-text {
    color: #fff;
    font-size: 7cqw; /* NEU: Größer, damit es auf Stufe S gut lesbar ist! */
    line-height: 1.4;
    text-align: center;
    font-family: sans-serif;
    text-shadow: none; 
}

.ac-effect-popup-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    width: 6cqw;
    height: 6cqw;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3cqw;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    border: 1px solid #fff;
}
.ac-effect-popup-close:hover {
    transform: scale(1.1);
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- EINHEITEN WERTE (ATK, MAG, DEF) --- */
.ac-stats-layer { z-index: 7; }

.ac-stat {
    position: absolute;
    font-family: serif;
    font-size: 8.5cqw;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 25px #000;
}

.ac-stat-atk { top: 78.5%; left: 22.5%; transform: translate(-50%, -50%); color: #ff5d56; }
.ac-stat-mag { top: 78.5%; left: 50%; transform: translate(-50%, -50%); color: #e382ff; }
.ac-stat-def { top: 78.5%; left: 77.4%; transform: translate(-50%, -50%); color: #8fc8ff; }

/* --- ANIMIERTE RARITÄTS-EFFEKTE --- */
@keyframes foilShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes ultimateGlow {
    0% { box-shadow: 0 0 10px rgba(255,215,0,0.5); filter: brightness(1); }
    50% { box-shadow: 0 0 30px rgba(255,215,0,1), 0 0 50px rgba(255,140,0,0.8); filter: brightness(1.1); }
    100% { box-shadow: 0 0 10px rgba(255,215,0,0.5); filter: brightness(1); }
}

/* Rare: Leichter Glanz auf dem Bild */
.ac-rare .ac-foil-art {
    background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
    animation: foilShine 4s infinite linear;
}

/* Epic: Starker Glanz auf Bild + Leichter Glanz auf Karte */
.ac-epic .ac-foil-art {
    background-image: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
    animation: foilShine 3s infinite linear;
}
.ac-epic .ac-foil-card {
    background-image: linear-gradient(105deg, transparent 20%, rgba(200,100,255,0.3) 50%, transparent 80%);
    animation: foilShine 5s infinite linear reverse;
}

/* Ultimate: Episches Leuchten Bild + Karte + Box-Shadow */
.ac-ultimate {
    animation: ultimateGlow 4s infinite alternate;
}
.ac-ultimate .ac-foil-art {
    background-image: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.9) 30%, rgba(255,215,0,0.6) 40%, transparent 50%);
    animation: foilShine 2.5s infinite linear;
}
.ac-ultimate .ac-foil-card {
    background-image: linear-gradient(125deg, rgba(255,0,0,0.2), rgba(255,215,0,0.2), rgba(0,255,0,0.2), rgba(0,255,255,0.2), rgba(255,0,255,0.2));
    animation: foilShine 6s infinite linear;
}

/* =========================================
   AETHELCARD - SAMMELALBUM & MODALS
   ========================================= */

/* Das neue Sammelalbum Vollbild-Fenster */
.album-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-dark);
    z-index: 20000;
    overflow-y: auto;
    padding: 0; 
    box-sizing: border-box;
    font-family: 'Cinzel', serif; /* Wir nutzen Cinzel für den High-Fantasy Look */
    color: var(--fine);
    box-shadow: 0 0 100px rgba(212, 175, 55, 0.2); /* Sanfter goldener Glow am Rand */
}

/* Der Header-Bereich mit Titel und Schließen-Button */
.album-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: linear-gradient(180deg, rgba(30,30,30,1) 0%, rgba(20,20,20,1) 100%);
    border-bottom: 2px solid var(--primary-gold);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    position: sticky;
    top: 0;
    z-index: 100;
}
.album-header-bar h2 {
    color: var(--primary-gold);
    margin: 0;
    font-size: 28px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    letter-spacing: 2px;
}

/* Die Kontroll-Leiste (Filter & Größe): Strukturierter Mantel */
.album-controls-wrapper {
    background: rgba(10,10,10,0.95);
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.album-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

/* Filter-Gruppe */
.filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-title {
    color: var(--text-muted);
    font-size: 14px;
    margin-right: 5px;
}


/* Größen- & Pagination-Gruppe */
.settings-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

/* Pagination Buttons (Konsistent und Stylisch) */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 30px 0;
    background: rgba(0,0,0,0.3);
}
.pagination-info {
    color: var(--fine);
    font-weight: bold;
    font-size: 16px;
    min-width: 150px;
    text-align: center;
}

/* Der Album-Grid Bereich */
.album-main-container {
    padding: 30px;
}
.album-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

/* Dynamische Kartengrößen (Fine-tuned für Mobile/Desktop) */
.card-size-small { width: 140px; }
.card-size-medium { width: 220px; }
.card-size-large { width: 320px; }

@media (max-width: 600px) {
    .album-main-container { padding: 15px; }
    .card-size-small { width: 30%; } /* 3 pro Zeile */
    .card-size-medium { width: 45%; } /* 2 pro Zeile */
    .card-size-large { width: 95%; }  /* 1 pro Zeile */
    
    .settings-group { margin-left: 0; width: 100%; justify-content: center; margin-top: 10px; }
    .pagination-container { flex-direction: column; gap: 10px; }
}

/* Der Kartenrücken für nicht-besessene Karten (Mysteriös) */
.ac-card-back {
    width: 100%;
    aspect-ratio: 832 / 1248;
    border-radius: 4.5cqw;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    filter: brightness(0.7) sepia(0.2); /* Etwas dunkler und gealtert */
}
.ac-card-back:hover {
    filter: brightness(1.2) sepia(0); /* Leuchtet auf, wenn man drüberfährt */
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

/* Fullscreen Zoom Fenster (Dramatisch) */
.ac-zoom-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.96);
    z-index: 30000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    perspective: 1000px;
}
.ac-zoom-container {
    width: 90vw;
    max-width: 450px;
    animation: zoomInCard 0.4s ease forwards;
}
@keyframes zoomInCard {
    0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}


/* --- AETHELCARD BUTTONS & SELECTS --- */
.album-select {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-family: sans-serif;
    outline: none;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    transition: var(--transition);
    cursor: pointer;
}
.album-select:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), inset 0 2px 5px rgba(0,0,0,0.8);
}

.album-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition);
}
.album-btn:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    background: rgba(212, 175, 55, 0.1);
}
.album-btn.active {
    border-color: var(--fine);
    color: var(--fine);
    background: rgba(46, 204, 113, 0.1);
}

.album-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s;
}
.album-close-btn:hover { color: var(--danger); }

/* --- AETHELCARD MENÜ GRID --- */
.aethelcard-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.ac-menu-card {
    background: rgba(25, 31, 38, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ac-menu-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    background: rgba(212, 175, 55, 0.05);
}

.ac-menu-card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-right: 1px solid var(--border-color);
}

.ac-menu-info { padding: 15px; }
.ac-menu-info h3 { color: var(--primary-gold); margin-bottom: 5px; font-size: 16px; text-transform: uppercase; }
.ac-menu-info p { color: var(--text-muted); font-size: 13px; margin: 0; }

@media (max-width: 768px) {
    .aethelcard-menu-grid { grid-template-columns: 1fr; }
}

/* --- DECK BUILDER UI --- */
.deck-builder-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.deck-info-bar {
    background: rgba(0,0,0,0.6);
    padding: 15px 25px;
    border-radius: 8px;
    border: 1px solid var(--primary-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.ac-card-count-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--primary-gold);
    color: #000;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.ac-container.out-of-stock {
    filter: grayscale(1) brightness(0.4);
    pointer-events: none;
}

/* --- AETHELCARD MENÜ GRID (GRÖSSER) --- */
.ac-menu-card img {
    width: 140px; /* Deutlich größeres Bild */
    height: 140px;
}
.ac-menu-info { padding: 20px 25px; }
.ac-menu-info h3 { font-size: 18px; margin-bottom: 8px; }
.ac-menu-info p { font-size: 14px; }

/* --- KARTEN BESTANDS-BADGE (Unten Rechts) --- */
.ac-card-count-badge {
    position: absolute;
    bottom: 8px; /* Nach unten verschoben */
    right: 8px;
    top: auto;   /* Hebt altes "top" auf */
    background: var(--primary-gold);
    color: #000;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 11px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    border: 1px solid #000;
}

/* --- SCHNELLWAHL-BUTTONS (+ und -) --- */
.ac-quick-action-btn {
    position: absolute;
    top: 3px;   /* NEU: Näher an den Rand */
    right: 3px; /* NEU: Näher an den Rand */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(10, 15, 20, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    z-index: 15;
    border: 2px solid;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.ac-quick-action-btn.add { border-color: var(--fine); color: var(--fine); }
.ac-quick-action-btn.add:hover { background: var(--fine); color: #000; transform: scale(1.15); }
.ac-quick-action-btn.remove { border-color: var(--danger); color: var(--danger); }
.ac-quick-action-btn.remove:hover { background: var(--danger); color: #fff; transform: scale(1.15); }

/* --- MODERNES DECK-BUILDER UI --- */
.deck-builder-modern-header {
    background: linear-gradient(180deg, rgba(15,18,22,1) 0%, rgba(10,12,15,0.95) 100%);
    border-bottom: 2px solid var(--primary-gold);
    padding: 20px 30px;
    position: sticky; /* Klebt beim Scrollen oben! */
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.deck-builder-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.5);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.deck-builder-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 25px;
    background: rgba(0,0,0,0.3);
    padding: 10px 20px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .deck-builder-modern-header { padding: 15px; }
    .deck-builder-stats { flex-direction: column; gap: 15px; text-align: center; }
}

/* =========================================
   AETHELCARD - BOOSTER UNBOXING ENGINE
   ========================================= */

.unboxing-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, rgba(30,35,45,0.95) 0%, #000 100%);
    z-index: 30000;
    display: flex; justify-content: center; align-items: center;
    perspective: 1200px;
    overflow: hidden;
    transition: background 1s ease;
}

/* Abdunklung bei Ultimate Pull */
.unboxing-modal.ultimate-darken {
    background: radial-gradient(circle at center, #000 0%, #000 100%);
}

/* --- DAS BOOSTER PACK --- */
.booster-pack-item {
    width: 300px;
    cursor: pointer;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8));
    animation: boosterFlyIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: transform 0.2s;
}
.booster-pack-item:hover { transform: scale(1.05) translateY(-10px); filter: drop-shadow(0 30px 40px rgba(212,175,55,0.4)); }

/* Aufreiß-Animation */
.booster-pack-item.ripping {
    pointer-events: none;
    animation: boosterRip 0.8s ease-in forwards;
}

@keyframes boosterFlyIn {
    0% { transform: translateX(100vw) rotate(45deg); opacity: 0; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

@keyframes boosterRip {
    0% { transform: scale(1.05) rotate(-5deg); filter: brightness(1.5); }
    20% { transform: scale(1.1) rotate(5deg); }
    40% { transform: scale(1.1) rotate(-5deg); }
    60% { transform: scale(1.2); opacity: 1; filter: brightness(2); }
    100% { transform: scale(1.5) translateY(-50px); opacity: 0; filter: blur(10px); }
}

/* --- DIE 3D KARTEN --- */
.unboxing-cards-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.unboxing-card-wrapper {
    width: 240px;
    aspect-ratio: 832 / 1248;
    position: relative;
    cursor: pointer;
    opacity: 0;
    transform: translateY(200px) scale(0.5);
    animation: fanOutCard 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.unboxing-card-wrapper:nth-child(1) { animation-delay: 0.1s; }
.unboxing-card-wrapper:nth-child(2) { animation-delay: 0.3s; margin-top: -40px; }
.unboxing-card-wrapper:nth-child(3) { animation-delay: 0.5s; }

@keyframes fanOutCard {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.unboxing-card-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d; /* WICHTIG FÜR SAFARI/iOS */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FIX: Perfekte abgerundete Ecken & Sichtbarkeit im 3D-Raum */
.unboxing-card-front, .unboxing-card-back {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* WICHTIG FÜR SAFARI/iOS */
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    overflow: hidden; 
}

.unboxing-card-back {
    transform: rotateY(0deg); /* Explizit auf 0 Grad setzen */
    -webkit-transform: rotateY(0deg);
}

.unboxing-card-wrapper:hover .unboxing-card-back img { 
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(212,175,55,0.5)); 
}

.unboxing-card-back img {
    width: 100%; 
    height: 100%; 
    display: block;
    object-fit: fill; /* Zwingt das Bild exakt in den Rahmen, ohne heranzuzoomen! */
    border-radius: inherit;
    transition: filter 0.3s;
}


/* Die Vorderseite ist um 180 Grad gedreht */
.unboxing-card-front {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: #000;
}

/* =========================================
   AETHELCARD - PERSISTENTE LEUCHT-EFFEKTE (IDLE)
   ========================================= */

/* Basis-Klasse für das persistente Leuchten (wird per JS nach der Animation gesetzt) */
.unboxing-card-wrapper.revealed .unboxing-card-inner {
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* 1. Rare: Pulsierende arkan-blaue Aura */
.unboxing-card-wrapper.revealed[data-rarity="Rare"] .unboxing-card-inner {
    animation: idleGlowRare 2s infinite ease-in-out;
}
@keyframes idleGlowRare {
    0%, 100% { transform: rotateY(180deg) scale(1.15); box-shadow: 0 0 20px rgba(0, 191, 255, 0.5), 0 0 10px rgba(0, 191, 255, 0.3); }
    50% { transform: rotateY(180deg) scale(1.15); box-shadow: 0 0 40px rgba(0, 191, 255, 0.8), 0 0 20px rgba(0, 191, 255, 0.5); }
}

/* 2. Epic: Pulsierende lila-goldene Void-Aura (etwas aggressiver) */
.unboxing-card-wrapper.revealed[data-rarity="Epic"] .unboxing-card-inner {
    animation: idleGlowEpic 2.5s infinite ease-in-out;
}
@keyframes idleGlowEpic {
    0%, 100% { transform: rotateY(180deg) scale(1.25); box-shadow: 0 0 25px rgba(138, 43, 226, 0.6), 0 0 10px rgba(212, 175, 55, 0.3); }
    50% { transform: rotateY(180deg) scale(1.25); box-shadow: 0 0 50px rgba(138, 43, 226, 0.9), 0 0 25px rgba(212, 175, 55, 0.6); }
}

/* 3. Ultimate: Blendende himmlische Aura & schwebender Effekt (maximaler Juice!) */
.unboxing-card-wrapper.revealed[data-rarity="Ultimate"] .unboxing-card-inner {
    animation: idleGlowUltimate 3s infinite ease-in-out;
}
@keyframes idleGlowUltimate {
    0%, 100% { 
        transform: rotateY(900deg) scale(1.35) translateY(-10px); 
        box-shadow: 0 0 40px #fff, 0 0 20px #0ff, 0 0 60px rgba(212, 175, 55, 0.8); 
    }
    50% { 
        transform: rotateY(900deg) scale(1.38) translateY(-15px); 
        box-shadow: 0 0 80px #fff, 0 0 40px #0ff, 0 0 100px rgba(212, 175, 55, 1); 
    }
}


/* Verhindert, dass der innere .ac-container die Ecken und den Hover-Effekt bricht */
.unboxing-card-front .ac-container {
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: none !important;
}

/* --- DIE NEUEN EPISCHEN RARITÄTS-ANIMATIONEN --- */

/* Normal: Simples, federndes Umdrehen */
.reveal-normal { animation: animRevealNormal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes animRevealNormal {
    0% { transform: rotateY(0) scale(1); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(180deg) scale(1.05); box-shadow: 0 0 15px rgba(255,255,255,0.2); }
}

/* Rare: Arkane Entladung (Schnell, cyan leuchtend) */
.reveal-rare { animation: animRevealRare 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; z-index: 50; }
@keyframes animRevealRare {
    0% { transform: rotateY(0) scale(1); }
    40% { transform: rotateY(0) scale(1.1) translateY(-10px); box-shadow: 0 0 20px rgba(0, 191, 255, 0.5); }
    70% { transform: rotateY(180deg) scale(1.2); box-shadow: 0 0 50px rgba(0, 191, 255, 1), 0 0 20px #fff; }
    100% { transform: rotateY(180deg) scale(1.15); box-shadow: 0 0 30px rgba(0, 191, 255, 0.6); }
}

/* Epic: Leeren-Eruption (Zieht sich zusammen, explodiert lila/gold) */
.reveal-epic { animation: animRevealEpic 2.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; z-index: 100; }
@keyframes animRevealEpic {
    0% { transform: rotateY(0) scale(1); }
    20% { transform: rotateY(0) scale(0.9) rotate(-3deg); box-shadow: inset 0 0 20px #000; }
    40% { transform: rotateY(0) scale(0.9) rotate(3deg); box-shadow: 0 0 30px rgba(138, 43, 226, 0.8); }
    50% { transform: rotateY(0) scale(0.95) rotate(-1deg); }
    70% { transform: rotateY(180deg) scale(1.4); box-shadow: 0 0 80px rgba(138, 43, 226, 1), 0 0 40px rgba(212, 175, 55, 1); }
    100% { transform: rotateY(180deg) scale(1.25); box-shadow: 0 0 40px rgba(138, 43, 226, 0.8), 0 0 20px rgba(212, 175, 55, 0.5); }
}

/* Ultimate: Himmlische Aszendenz (Rasante Drehung, massiver Blitz) */
.reveal-ultimate { animation: animRevealUltimate 4.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; z-index: 200; }
@keyframes animRevealUltimate {
    0% { transform: rotateY(0) scale(1) translateY(0); }
    15% { transform: rotateY(0) scale(1.2) translateY(-20px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }
    35% { transform: rotateY(360deg) scale(1.3) translateY(-30px); box-shadow: 0 0 50px rgba(255, 215, 0, 0.8); }
    50% { transform: rotateY(630deg) scale(1.4) translateY(-40px); box-shadow: 0 0 100px rgba(255, 255, 255, 1); }
    60% { transform: rotateY(810deg) scale(1.5) translateY(-40px); box-shadow: 0 0 0px transparent; } 
    65% { transform: rotateY(900deg) scale(1.6); box-shadow: 0 0 150px #fff, 0 0 100px #0ff, 0 0 200px rgba(212, 175, 55, 1); } 
    100% { transform: rotateY(900deg) scale(1.35) translateY(-10px); box-shadow: 0 0 60px rgba(212, 175, 55, 1), 0 0 30px #0ff; }
}

/* Wegfliegen in die Sammlung */
.fly-to-collection { pointer-events: none; animation: flyUpToDeck 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; }
@keyframes flyUpToDeck { to { transform: translateY(-100vh) scale(0.2) rotate(15deg); opacity: 0; } }

/* Mobile Layout für die 3 Karten */
@media (max-width: 800px) {
    .unboxing-cards-container { position: relative; height: 400px; }
    .unboxing-card-wrapper { position: absolute; width: 180px; }
    .unboxing-card-wrapper:nth-child(1) { transform: translateX(-60px) rotate(-15deg); margin: 0;}
    .unboxing-card-wrapper:nth-child(2) { transform: translateY(-30px) translateZ(10px); z-index: 5; margin: 0;}
    .unboxing-card-wrapper:nth-child(3) { transform: translateX(60px) rotate(15deg); margin: 0;}

    @keyframes fanOutCard {
        0% { opacity: 0; transform: translateY(200px) scale(0.5); }
        100% { opacity: 1; } 
    }
}

/* =========================================
   AETHELCARD - BATTLE ARENA (SCHLACHTFELD)
   ========================================= */

.battle-arena-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, rgba(20,25,30,0.98) 0%, #000 100%);
    z-index: 40000;
    display: flex; flex-direction: column; justify-content: space-between;
    font-family: 'Cinzel', serif;
    color: #fff;
    overflow: hidden;
}

/* --- SEKTOR BASIS --- */
.battle-sector { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; width: 100%; box-sizing: border-box; }
.battle-sector-top { border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.4); }
.battle-sector-bot { border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.6); }

/* --- LEBENS- & DECK-BOXEN --- */
.battle-hp-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(231,76,60,0.2) 0%, rgba(0,0,0,0.8) 100%);
    border: 2px solid var(--danger); border-radius: 50%;
    box-shadow: 0 0 20px rgba(231,76,60,0.4);
}
.battle-hp-val { font-size: 32px; font-weight: bold; color: var(--danger); text-shadow: 0 0 10px #000; }
.battle-hp-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.battle-deck-box { display: flex; gap: 15px; align-items: center; }
.battle-pile {
    width: 60px; aspect-ratio: 832/1248;
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.2);
    display: flex; justify-content: center; align-items: center;
    font-size: 18px; font-weight: bold; background: rgba(0,0,0,0.8);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
}
.battle-pile.deck { background: url('images/Cardgame/00-Card-Back.png') center/cover; color: var(--primary-gold); text-shadow: 0 0 5px #000; border-color: var(--primary-gold); }

/* --- HANDKARTEN --- */
.battle-hand {
    display: flex; justify-content: center; align-items: center;
    flex: 1; max-width: 60%;
}
.battle-hand-enemy .battle-hand-card {
    width: 70px; aspect-ratio: 832/1248;
    background: url('images/Cardgame/00-Card-Back.png') center/cover;
    border-radius: 4px; border: 1px solid #000;
    margin-left: -30px; /* Überlappung */
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}
.battle-hand-enemy .battle-hand-card:first-child { margin-left: 0; }

.battle-hand-player {
    gap: -40px; /* Überlappung für eigene Karten */
    padding-top: 20px; /* Platz fürs Anheben */
}
.battle-hand-player .ac-container {
    width: 130px; 
    margin-left: -50px;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0s;
    box-shadow: -10px 0 20px rgba(0,0,0,0.6);
}
.battle-hand-player .ac-container:first-child { margin-left: 0; }
.battle-hand-player .ac-container:hover {
    transform: translateY(-30px) scale(1.1);
    z-index: 100 !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.9);
}
.battle-hand-player .ac-container.selected-for-battle {
    transform: translateY(-40px);
    border: 2px solid var(--fine);
    box-shadow: 0 0 25px rgba(46, 204, 113, 0.6);
}

/* --- MID SEKTOR (KAMPFZONE) --- */
.battle-sector-mid {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; width: 100%;
}
.battle-board-area {
    display: flex; justify-content: center; gap: 20px; width: 100%;
}
.battle-slot {
    width: 140px; aspect-ratio: 832/1248;
    border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    color: rgba(255,255,255,0.2); font-size: 12px; text-transform: uppercase;
    background: rgba(0,0,0,0.3);
}

/* Die Aktionsleiste in der Mitte */
.battle-action-bar {
    width: 100%; padding: 20px 0;
    display: flex; justify-content: center; align-items: center; gap: 15px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.1) 50%, transparent 100%);
    border-top: 1px solid rgba(212,175,55,0.3);
    border-bottom: 1px solid rgba(212,175,55,0.3);
    margin: 30px 0;
}

/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 800px) {
    .battle-sector { padding: 10px; }
    .battle-hp-box { width: 60px; height: 60px; }
    .battle-hp-val { font-size: 24px; }
    .battle-pile { width: 45px; font-size: 14px; }
    
    .battle-hand-player {
        max-width: 100%;
        overflow-x: auto; /* Erlaubt horizontales Scrollen bei vielen Karten */
        padding-bottom: 10px;
        justify-content: flex-start; /* Scrollen von links */
    }
    .battle-hand-player .ac-container { width: 100px; margin-left: -30px; }
    .battle-slot { width: 90px; }
    
    .battle-action-bar { margin: 15px 0; padding: 10px 0; flex-wrap: wrap; }
}
/* =========================================
   AETHELCARD - BATTLE ANIMATIONS (JUICE)
   ========================================= */

/* Die Karte leuchtet auf, wenn sie einen Effekt auslöst */
.anim-glow-source {
    animation: sourceGlow 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}
@keyframes sourceGlow {
    0% { transform: scale(1); box-shadow: 0 0 0 transparent; }
    50% { transform: scale(1.15) translateY(-10px); box-shadow: 0 0 30px #fff, 0 0 50px var(--primary-gold); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
}

/* Der Wert (ATK/MAG/DEF) poppt auf und wird farbig */
.anim-stat-pop-up {
    animation: statPopUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    color: var(--fine) !important;
    text-shadow: 0 0 15px var(--fine), 2px 2px 0 #000 !important;
}
.anim-stat-pop-down {
    animation: statPopDown 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    color: var(--danger) !important;
    text-shadow: 0 0 15px var(--danger), 2px 2px 0 #000 !important;
}
@keyframes statPopUp { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1.2); } }
@keyframes statPopDown { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(0.8); } }

/* Schwebender Text (Für Schaden und Effekte) */
.battle-floating-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 5px #000, 0 0 15px var(--primary-gold);
    pointer-events: none;
    z-index: 1000;
    animation: floatUpFade 1.5s ease-out forwards;
    white-space: nowrap;
}
.battle-floating-text.damage { color: var(--danger); text-shadow: 0 2px 5px #000, 0 0 15px var(--danger); font-size: 32px; }
.battle-floating-text.heal { color: var(--fine); text-shadow: 0 2px 5px #000, 0 0 15px var(--fine); font-size: 32px; }

@keyframes floatUpFade {
    0% { opacity: 0; transform: translate(-50%, -30%); }
    20% { opacity: 1; transform: translate(-50%, -50%); }
    80% { opacity: 1; transform: translate(-50%, -80%); }
    100% { opacity: 0; transform: translate(-50%, -100%); }
}

/* Wackeln für Schaden / Clash */
.anim-shake {
    animation: shakeAnim 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shakeAnim {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px) rotate(-5deg); }
    40%, 80% { transform: translateX(10px) rotate(5deg); }
}

/* Verlierer Karte wird grau und fällt zurück */
.anim-loser-card {
    filter: grayscale(1) brightness(0.3);
    transform: scale(0.9) translateY(20px);
    transition: all 0.5s ease;
}

/* 3D Reveal (Aufdecken der gegnerischen Karten) */
.battle-hidden-card {
    background: url('images/Cardgame/00-Card-Back.png') center/cover;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}
.battle-hidden-card.reveal {
    transform: rotateY(180deg) scale(1.1);
    box-shadow: 0 10px 30px rgba(212,175,55,0.5);
}
.battle-hidden-card .battle-card-front {
    transform: rotateY(180deg);
    backface-visibility: hidden;
    width: 100%; height: 100%;
}

/* --- BATTLE UI FIXES & NEUE ANIMATIONEN --- */

/* 1. Zoom Modal MUSS über der Battle-Arena liegen */
.ac-zoom-modal { z-index: 50000 !important; }

/* 2. Handkarten weiter nach oben & Riesig beim Auswählen */
.battle-hand-player { padding-bottom: 40px; }
.battle-hand-player .ac-container.selected-for-battle {
    transform: translateY(-80px) scale(1.4) !important;
    z-index: 250 !important;
}

/* 3. Persistente Werte-Highlights (Buffs, Debuffs & Angesagter Wert) */
.stat-buffed { color: var(--fine) !important; text-shadow: 0 0 15px var(--fine), 2px 2px 0 #000 !important; }
.stat-debuffed { color: var(--danger) !important; text-shadow: 0 0 15px var(--danger), 2px 2px 0 #000 !important; }
.stat-declared { 
    font-size: 11.5cqw !important; /* Deutlich größer */
    color: var(--primary-gold) !important; 
    text-shadow: 0 0 25px #fff, 0 0 10px var(--primary-gold), 2px 2px 0 #000 !important; 
    z-index: 10;
}

/* 4. Friedhof-Flug Animation & Verlierer-Fix */
.anim-fly-grave { animation: flyToGrave 0.8s ease-in forwards; pointer-events: none; }
@keyframes flyToGrave { to { transform: translate(300px, 500px) scale(0.2) rotate(45deg); opacity: 0; } }

.anim-loser-card { filter: grayscale(1) brightness(0.3) !important; transform: scale(0.9) translateY(20px); transition: all 0.5s ease; }

/* 5. Zieh- & Setz-Animationen */
.anim-draw-card { animation: drawFlyIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes drawFlyIn { from { transform: translate(200px, -200px) scale(0.2) rotate(45deg); opacity: 0; } to { transform: translate(0,0) scale(1) rotate(0); opacity: 1; } }

/* --- BATTLE ARENA LAYOUT UPDATE (Mitte) --- */
.battle-sector-mid-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex: 1; 
    padding: 0 30px;
    box-sizing: border-box;
}
.battle-mid-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-height: 380px; /* Hält die HP & Decks auf Höhe der Spielfelder */
    z-index: 10;
}
@media (max-width: 800px) {
    .battle-sector-mid-wrapper { padding: 0 5px; }
    .battle-mid-side { max-height: 280px; }
    /* Zwingt die Decks auf Handys untereinander, um wertvolle Breite zu sparen! */
    .battle-mid-right .battle-deck-box { flex-direction: column; gap: 5px; } 
    .battle-slot { width: 80px; }
    .battle-board-area { gap: 10px; }
}

/* --- BATTLE SPLASH SCREENS (Phasen-Einblendungen) --- */
.battle-splash-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
    z-index: 60000; /* Ganz nach oben! */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    pointer-events: none; opacity: 0;
    animation: splashFadeInOut 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.battle-splash-title {
    font-family: 'Cinzel', serif; font-size: 8vw; font-weight: 900; color: var(--primary-gold);
    text-transform: uppercase; letter-spacing: 10px; margin-bottom: 10px;
    text-shadow: 0 0 40px rgba(212,175,55,0.8), 0 0 10px #fff;
    animation: splashTextZoom 1.8s ease-out forwards;
    text-align: center;
}

.battle-splash-subtitle {
    font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 24px; color: #fff;
    letter-spacing: 4px; text-transform: uppercase;
    text-shadow: 0 5px 15px #000;
    animation: splashSubZoom 1.8s ease-out forwards;
    text-align: center;
}

@keyframes splashFadeInOut {
    0% { opacity: 0; backdrop-filter: blur(0px); }
    15% { opacity: 1; backdrop-filter: blur(8px); }
    85% { opacity: 1; backdrop-filter: blur(8px); }
    100% { opacity: 0; backdrop-filter: blur(0px); }
}

@keyframes splashTextZoom {
    0% { transform: scale(0.8) translateY(20px); letter-spacing: 0px; }
    100% { transform: scale(1.1) translateY(0); letter-spacing: 20px; }
}

@keyframes splashSubZoom {
    0% { transform: scale(0.9); opacity: 0;}
    15% { opacity: 1; }
    100% { transform: scale(1); opacity: 0.8;}
}

/* --- BATTLE SCREEN FLASHES (Schaden & Heilung) --- */
.battle-flash-overlay {
    position: absolute; left: 0; width: 100vw; height: 50vh;
    pointer-events: none; z-index: 35000; opacity: 0;
}
/* Roter Schaden */
.battle-flash-overlay.player.damage { bottom: 0; background: linear-gradient(to top, rgba(231,76,60,0.6) 0%, transparent 100%); }
.battle-flash-overlay.enemy.damage { top: 0; background: linear-gradient(to bottom, rgba(231,76,60,0.6) 0%, transparent 100%); }
/* Grüne Heilung */
.battle-flash-overlay.player.heal { bottom: 0; background: linear-gradient(to top, rgba(46,204,113,0.4) 0%, transparent 100%); }
.battle-flash-overlay.enemy.heal { top: 0; background: linear-gradient(to bottom, rgba(46,204,113,0.4) 0%, transparent 100%); }

/* Die Blitz-Animation */
.anim-screen-flash { animation: screenFlashAnim 0.6s ease-out forwards; }
@keyframes screenFlashAnim {
    0% { opacity: 0; } 
    15% { opacity: 1; } 
    100% { opacity: 0; }
}

details summary::-webkit-details-marker { display: none; }
details[open] summary { margin-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 10px; }

/* --- MARKTPLATZ REFRESH --- */
.market-hero {
    position: relative;
    min-height: 260px;
    aspect-ratio: 16 / 5;
    border: 1px solid rgba(212,175,55,0.28);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 22px;
    background: #07080a;
    box-shadow: 0 18px 45px rgba(0,0,0,0.42);
}
.market-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.market-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.58) 48%, rgba(7,8,10,0.24) 100%),
        linear-gradient(0deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.12) 60%);
}
.market-hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 260px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: clamp(20px, 4vw, 38px);
}
.market-eyebrow { color: var(--primary-gold); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.market-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1; margin: 0 0 12px 0; }
.market-hero p { color: rgba(255,255,255,0.78); max-width: 560px; font-size: 15px; line-height: 1.5; }
.market-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 10px; min-width: 330px; }
.market-hero-stats div { background: rgba(0,0,0,0.58); border: 1px solid rgba(212,175,55,0.22); border-radius: 8px; padding: 14px 12px; text-align: center; backdrop-filter: blur(8px); }
.market-hero-stats strong { display: block; color: var(--primary-gold); font-size: 28px; line-height: 1; }
.market-hero-stats span { display: block; color: var(--text-muted); font-size: 11px; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }
.market-panel,
.market-active-card { background: linear-gradient(180deg, rgba(25,31,38,0.92), rgba(10,12,15,0.94)); border: 1px solid rgba(212,175,55,0.16); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.36); }
.market-panel { padding: 22px; margin-bottom: 24px; }
.market-panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.market-panel-head h3,
.market-full-routes h3 { color: var(--primary-gold); font-size: 22px; margin: 0 0 6px 0; }
.market-panel-head p,
.market-full-routes p { color: var(--text-muted); line-height: 1.5; margin: 0; }
.market-route-badge,
.market-capacity-pill { background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.32); border-radius: 999px; color: var(--primary-gold); font-size: 12px; font-weight: 800; padding: 8px 12px; white-space: nowrap; }
.market-wizard-header { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; border-bottom: 0; padding-bottom: 0; }
.market-wizard-header .wizard-step-tab { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(0,0,0,0.32); color: var(--text-muted); padding: 11px 8px; cursor: pointer; text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.market-wizard-header .wizard-step-tab.active { color: #111; background: linear-gradient(180deg, var(--primary-gold-hover), var(--primary-gold)); border-color: var(--primary-gold); text-shadow: none; box-shadow: 0 0 18px rgba(212,175,55,0.26); }
.market-wizard-header .wizard-step-tab:disabled { opacity: 0.42; cursor: not-allowed; }
.market-wizard-content { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 18px; }
.market-step-copy { margin: 0 0 14px 0; }
.market-step-copy h4 { color: #fff; font-size: 16px; margin-bottom: 4px; }
.market-step-copy p { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.market-destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.market-destination-btn { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.38); color: var(--text-main); cursor: pointer; text-align: left; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.market-destination-btn:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.42); background: rgba(212,175,55,0.08); }
.market-destination-btn.active { border-color: var(--primary-gold); background: rgba(212,175,55,0.16); box-shadow: inset 0 0 22px rgba(212,175,55,0.07); }
.market-destination-btn img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(212,175,55,0.42); flex-shrink: 0; }
.market-destination-btn strong { display: block; color: #fff; font-size: 14px; }
.market-destination-btn small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.market-unit-grid,
.market-resource-list { display: flex; flex-direction: column; gap: 10px; }
.market-unit-card,
.market-resource-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 12px; }
.market-unit-card img,
.market-resource-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(212,175,55,0.34); }
.market-unit-main strong,
.market-resource-row strong { display: block; color: #fff; margin-bottom: 4px; }
.market-unit-main span,
.market-resource-row span { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.market-stepper { display: grid; grid-template-columns: repeat(2, 44px) 78px repeat(2, 44px) 58px; gap: 6px; align-items: center; }
.market-stepper button { height: 36px; border-radius: 6px; border: 1px solid rgba(212,175,55,0.22); background: rgba(255,255,255,0.05); color: var(--primary-gold); font-weight: 800; cursor: pointer; }
.market-stepper button:hover { border-color: var(--primary-gold); background: rgba(212,175,55,0.12); }
.market-stepper input { width: 78px; text-align: center; padding: 9px 6px; color: #fff; font-weight: 800; }
.market-stepper .market-stepper-max { color: #111; background: var(--primary-gold); border-color: var(--primary-gold); }
.market-load-meter { background: rgba(0,0,0,0.45); border: 1px solid rgba(212,175,55,0.18); border-radius: 8px; padding: 13px; margin-bottom: 14px; }
.market-load-meter > div:first-child { display: flex; justify-content: space-between; color: #fff; margin-bottom: 10px; }
.market-load-meter span { color: var(--primary-gold); font-weight: 800; }
.market-load-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.market-load-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-gold), var(--fine)); border-radius: 999px; transition: width 0.25s ease; }
.market-contract-note { width: 100%; height: 86px; margin-top: 12px; text-align: left; resize: vertical; padding: 12px; }
.market-contract-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.market-contract-box { border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.42); padding: 16px; }
.market-contract-box h4 { color: var(--primary-gold); margin-bottom: 10px; }
.market-contract-box.offer { border-color: rgba(46,204,113,0.36); }
.market-contract-box.demand { border-color: rgba(231,76,60,0.36); }
.market-contract-box.alliance { border-color: rgba(212,175,55,0.42); }
.market-contract-box p { color: var(--text-muted); line-height: 1.45; }
.market-contract-arrow { color: var(--primary-gold); font-size: 30px; display: flex; align-items: center; }
.market-contract-notice { color: var(--text-muted); font-size: 13px; margin-top: 14px; font-style: italic; }
.market-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.market-primary-btn { width: auto; min-width: 150px; padding: 12px 18px; border-color: var(--primary-gold); color: var(--primary-gold); }
.market-primary-btn.filled { background: var(--primary-gold); color: #111; }
.market-secondary-btn { width: auto; padding: 12px 18px; border-color: rgba(255,255,255,0.18); color: var(--text-muted); }
.market-section-title { color: var(--fine); margin: 34px 0 16px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; font-size: 20px; font-weight: 800; }
.market-trade-list { display: flex; flex-direction: column; gap: 14px; }
.market-empty-state { color: var(--text-muted); text-align: center; padding: 24px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; background: rgba(0,0,0,0.24); }
.market-active-card { padding: 16px; }
.market-active-card.offered { border-color: rgba(46,204,113,0.28); }
.market-active-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.market-active-head span { display: block; color: #fff; font-weight: 800; }
.market-active-head small { display: block; color: var(--text-muted); margin-top: 4px; font-size: 12px; }
.market-route { display: grid; grid-template-columns: 84px minmax(120px, 1fr) 84px; gap: 14px; align-items: center; }
.market-route-node { text-align: center; color: var(--text-muted); font-size: 11px; }
.market-route-node img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 50%; border: 2px solid var(--primary-gold); margin: 0 auto 6px; }
.market-route-node span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-route-track { position: relative; height: 12px; border-radius: 999px; background: rgba(0,0,0,0.72); border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 2px 6px rgba(0,0,0,0.8); }
.market-route-track::before { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 8px, transparent 8px, transparent 15px); }
.market-route-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-gold), var(--fine)); transition: left 1s linear, width 1s linear; }
.market-caravan { position: absolute; top: -28px; transform: translateX(-50%); font-size: 25px; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.8)); transition: left 1s linear; z-index: 3; }
.market-caravan.returning { transform: translateX(-50%) scaleX(-1); }
.market-waiting-camp { position: absolute; top: -28px; right: -5px; font-size: 23px; }
.market-route-load,
.market-payload-grid { margin-top: 14px; background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; }
.market-payload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.market-payload-grid strong,
.market-route-load strong { display: block; color: var(--primary-gold); font-size: 12px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.trade-load-list { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-load-list span { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 5px 8px; color: #fff; font-size: 12px; }
.trade-load-list img { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; }
.trade-empty-load { color: var(--text-muted) !important; }
.market-trade-message { color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 10px; }
.market-card-actions { display: flex; gap: 10px; margin-top: 14px; }
.market-accept-btn { flex: 1; background: var(--fine); color: #08130d; border-color: var(--fine); }
.market-danger-btn { width: auto; border-color: var(--danger); color: var(--danger); }

@media (max-width: 900px) {
    .market-hero { aspect-ratio: auto; min-height: 360px; }
    .market-hero-content { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
    .market-hero-stats { width: 100%; min-width: 0; }
    .market-wizard-header { grid-template-columns: 1fr 1fr; }
    .market-unit-card,
    .market-resource-row { grid-template-columns: 48px minmax(0, 1fr); }
    .market-stepper { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(2, 1fr) minmax(68px, 1.2fr) repeat(2, 1fr) 1.1fr; }
    .market-route { grid-template-columns: 62px minmax(100px, 1fr) 62px; gap: 8px; }
    .market-contract-summary { grid-template-columns: 1fr; }
    .market-contract-arrow { justify-content: center; transform: rotate(90deg); }
}
@media (max-width: 560px) {
    .market-panel { padding: 14px; }
    .market-hero-stats { grid-template-columns: 1fr; }
    .market-wizard-header { grid-template-columns: 1fr; }
    .market-panel-head,
    .market-wizard-nav,
    .market-active-head { flex-direction: column; align-items: stretch; }
    .market-stepper { grid-template-columns: repeat(2, 1fr) minmax(70px, 1fr) repeat(2, 1fr); }
    .market-stepper .market-stepper-max { grid-column: 1 / -1; }
    .market-payload-grid { grid-template-columns: 1fr; }
}

/* =========================================
   ABENTEUER - TEXT ADVENTURE
   ========================================= */
.adventure-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.adventure-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-left: 4px solid var(--primary-gold);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(212,175,55,0.10), rgba(52,152,219,0.07)),
        rgba(12, 15, 18, 0.92);
    box-shadow: var(--shadow-card);
}

.adventure-hero h2,
.adventure-intro-shell h2 {
    color: var(--primary-gold);
    font-size: 28px;
    margin-bottom: 8px;
    letter-spacing: 0;
}

.adventure-hero p {
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 740px;
}

.adventure-cooldown {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 12px 16px;
    border: 1px solid rgba(46, 204, 113, 0.35);
    border-radius: 6px;
    color: var(--fine);
    background: rgba(0,0,0,0.35);
    text-align: center;
    font-weight: 700;
}

.adventure-rule-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.adventure-rule-strip span,
.adventure-last-result {
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(255,255,255,0.035);
    color: var(--text-main);
    text-align: center;
}

.adventure-last-result {
    text-align: left;
    color: var(--primary-gold);
}

.adventure-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.adventure-risk-card,
.adventure-main-panel,
.adventure-side-panel,
.adventure-intro-shell {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.adventure-risk-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 210px;
    padding: 18px;
}

.adventure-risk-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--primary-gold);
    font-size: 18px;
    font-weight: 800;
}

.adventure-risk-actions {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 8px;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 6px;
    background: rgba(212,175,55,0.08);
}

.adventure-risk-difficulty {
    color: var(--arcane-color);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.adventure-risk-cost {
    display: grid;
    gap: 8px;
    color: var(--text-muted);
    line-height: 1.35;
}

.adventure-risk-card .btn-clean {
    margin-top: auto;
}

.adventure-intro-shell {
    padding: 22px;
}

.adventure-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    color: var(--text-muted);
}

.adventure-pressure-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.adventure-pressure-pill {
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.adventure-pressure-pill.flood { border-color: rgba(52,152,219,0.45); color: #d7ecff; }
.adventure-pressure-pill.poison { border-color: rgba(46,204,113,0.45); color: #bcf5d2; }
.adventure-pressure-pill.smoke,
.adventure-pressure-pill.pressure { border-color: rgba(231,76,60,0.45); color: #ffd6d1; }

.heart {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}

.heart.full {
    color: var(--danger);
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.55);
}

.heart.empty {
    color: rgba(255,255,255,0.18);
}

.adventure-hp-display {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.adventure-hp-hearts {
    display: inline-flex;
    align-items: center;
}

.adventure-hp-label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.adventure-text {
    min-height: 260px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(0,0,0,0.45);
    color: #f1ead2;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.adventure-text-danger {
    display: inline;
    color: #ff8d82;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(231,76,60,0.45);
}

.adventure-text-heal {
    display: inline;
    color: #8ff0b2;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(46,204,113,0.35);
}

.adventure-action-row,
.adventure-select-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.adventure-action-row {
    flex-wrap: wrap;
    margin-top: 2px;
}

.adventure-play-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
}

.adventure-main-panel,
.adventure-side-panel {
    padding: 18px;
}

.adventure-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--primary-gold);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

.adventure-area-badge {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    border: 1px solid rgba(212,175,55,0.32);
    border-radius: 999px;
    background: rgba(212,175,55,0.08);
    white-space: nowrap;
}

.adventure-current-place {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid rgba(212,175,55,0.28);
    border-radius: 6px;
    background: rgba(212,175,55,0.07);
    color: var(--primary-gold);
    font-weight: 800;
    line-height: 1.35;
}

.adventure-select-row {
    margin-top: 14px;
}

.adventure-select-row select {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-align: left;
    font-size: 16px;
    outline: none;
}

.adventure-select-row .btn-clean {
    width: 130px;
    flex: 0 0 130px;
}

.adventure-side-panel h3 {
    color: var(--primary-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.adventure-side-panel h3:not(:first-child) {
    margin-top: 18px;
}

.adventure-inventory {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.adventure-inventory span {
    padding: 7px 10px;
    border: 1px solid rgba(52,152,219,0.35);
    border-radius: 999px;
    background: rgba(52,152,219,0.08);
    color: #d7ecff;
    font-size: 12px;
}

.adventure-log {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    color: var(--text-muted);
}

.adventure-log p {
    padding: 10px;
    border-left: 2px solid rgba(212,175,55,0.35);
    background: rgba(0,0,0,0.25);
    line-height: 1.45;
}

.adventure-log strong {
    color: var(--text-main);
}

.adventure-result-shell {
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.adventure-result-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(0,0,0,0.38);
    border-left: 4px solid var(--primary-gold);
}

.adventure-result-shell.success .adventure-result-banner { border-left-color: var(--fine); }
.adventure-result-shell.dead .adventure-result-banner { border-left-color: var(--danger); }
.adventure-result-shell.night .adventure-result-banner { border-left-color: var(--arcane-color); }

.adventure-result-kicker {
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.adventure-result-banner h2 {
    color: var(--primary-gold);
    font-size: 32px;
    margin: 0;
}

.adventure-result-score {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: var(--primary-gold);
    font-size: 20px;
    font-weight: 900;
    flex: 0 0 76px;
}

.adventure-result-text {
    min-height: 180px;
}

.adventure-result-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.adventure-result-stats span,
.adventure-result-rewards {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(0,0,0,0.24);
}

.adventure-result-rewards h3 {
    color: var(--primary-gold);
    margin-bottom: 10px;
    font-size: 15px;
}

.adventure-abort-btn {
    width: auto;
    padding: 8px 14px;
    border-color: var(--danger);
    color: var(--danger);
}

@media (max-width: 980px) {
    .adventure-hero,
    .adventure-status-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .adventure-cooldown {
        min-width: 0;
    }

    .adventure-risk-grid,
    .adventure-play-grid {
        grid-template-columns: 1fr;
    }

    .adventure-rule-strip {
        grid-template-columns: 1fr;
    }

    .adventure-text {
        min-height: 220px;
        font-size: 17px;
    }
}

/* --- ALLIANZ-FESTUNG REFRESH --- */
.alliance-shell {
    display: grid;
    gap: 16px;
}

.alliance-hero-refresh {
    position: relative;
    min-height: 360px;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.26);
    background: #08080b;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.alliance-hero-refresh img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05) brightness(0.72);
}

.alliance-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 8, 10, 0.94) 0%, rgba(12, 12, 14, 0.76) 43%, rgba(7, 8, 10, 0.18) 100%),
        linear-gradient(0deg, rgba(7, 8, 10, 0.84) 0%, rgba(7, 8, 10, 0.08) 58%);
}

.alliance-hero-copy {
    position: relative;
    z-index: 1;
    min-height: 360px;
    height: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
}

.alliance-hero-copy span,
.alliance-vault-head span {
    color: var(--primary-gold);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.alliance-hero-copy h1 {
    margin: 8px 0 10px;
    color: #fff4c7;
    font-size: 44px;
    line-height: 1.08;
    text-shadow: 0 0 22px rgba(212, 175, 55, 0.42);
}

.alliance-hero-copy p {
    max-width: 590px;
    margin: 0;
    color: rgba(245, 239, 229, 0.88);
    line-height: 1.55;
}

.alliance-vault-panel {
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 8px;
    padding: 18px;
    background:
        radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(22, 22, 27, 0.96), rgba(11, 12, 15, 0.98));
}

.alliance-vault-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.alliance-vault-head h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 23px;
}

.alliance-view-toggle {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 12px;
}

.alliance-resource-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.alliance-resource-card {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.26);
}

.alliance-resource-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
}

.alliance-resource-card.wood::before { background: #7fba66; }
.alliance-resource-card.stone::before { background: #b8c4ce; }
.alliance-resource-card.gold::before { background: #f0c45a; }
.alliance-resource-card.mana::before { background: var(--mana-color); }
.alliance-resource-card.arcane::before { background: var(--arcane-color); }

.alliance-resource-card img {
    position: relative;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.alliance-resource-card div {
    position: relative;
    min-width: 0;
}

.alliance-resource-card span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.alliance-resource-card strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.alliance-resource-meter {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
}

.alliance-resource-meter i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-gold);
    transition: width 0.35s ease, background 0.35s ease;
}

.alliance-resource-card.wood i { background: #7fba66; }
.alliance-resource-card.stone i { background: #b8c4ce; }
.alliance-resource-card.gold i { background: #f0c45a; }
.alliance-resource-card.mana i { background: var(--mana-color); }
.alliance-resource-card.arcane i { background: var(--arcane-color); }

.alliance-tabs-refresh {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 8, 12, 0.74);
}

.alliance-tab-btn {
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.035);
    font-weight: 800;
    white-space: normal;
}

.alliance-tab-btn span {
    display: block;
    margin-bottom: 3px;
    font-size: 18px;
}

.alliance-tab-btn.active,
.alliance-tab-btn:hover {
    color: #fff;
    border-color: rgba(212, 175, 55, 0.62);
    background: linear-gradient(180deg, rgba(116, 84, 26, 0.46), rgba(27, 28, 32, 0.94));
    box-shadow: inset 0 0 22px rgba(212, 175, 55, 0.08);
}

.alliance-proposals-slot:empty {
    display: none;
}

.alliance-content-grid .dashboard-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 16px;
    width: 100%;
}

.alliance-overview-card {
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(22, 22, 27, 0.96), rgba(12, 12, 16, 0.98));
}

.alliance-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.alliance-card-title h3 {
    margin: 0;
    color: var(--primary-gold);
}

.alliance-card-title span {
    color: var(--text-muted);
    font-size: 12px;
}

.alliance-chronicle-card {
    max-height: 430px;
    overflow: hidden;
}

.alliance-chronicle-list {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 6px;
}

.alliance-log-entry {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.alliance-log-time {
    color: var(--primary-gold);
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
}

.alliance-log-msg {
    color: #fff;
    line-height: 1.45;
}

.alliance-log-actor {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 2px;
}

@media (max-width: 1180px) {
    .alliance-resource-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .alliance-tabs-refresh {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .alliance-content-grid .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .alliance-hero-refresh,
    .alliance-hero-copy {
        aspect-ratio: auto;
        min-height: 260px;
    }

    .alliance-hero-copy {
        padding: 20px;
    }

    .alliance-hero-copy h1 {
        font-size: 32px;
    }

    .alliance-vault-head {
        display: block;
    }

    .alliance-view-toggle {
        margin-top: 12px;
        width: 100%;
    }

    .alliance-resource-grid,
    .alliance-tabs-refresh {
        grid-template-columns: 1fr;
    }

    .alliance-tab-btn span {
        display: inline-block;
        margin: 0 8px 0 0;
    }

    .alliance-log-entry {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* --- DORF REFRESH --- */
.village-hero-refresh {
    position: relative;
    min-height: 380px;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 18px;
    border: 1px solid rgba(212, 175, 55, 0.26);
    background: #090b08;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.village-hero-refresh img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.05) brightness(0.76);
}

.village-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 9, 8, 0.94) 0%, rgba(16, 20, 16, 0.72) 45%, rgba(7, 9, 8, 0.2) 100%),
        linear-gradient(0deg, rgba(7, 9, 8, 0.88) 0%, rgba(7, 9, 8, 0.1) 60%);
}

.village-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
    height: 100%;
    min-height: 380px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.village-hero-copy > span,
.village-panel-head span {
    color: var(--primary-gold);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.village-hero-copy h1 {
    margin: 8px 0 10px;
    color: #fff5d7;
    font-size: 48px;
    line-height: 1.05;
    text-shadow: 0 0 22px rgba(212, 175, 55, 0.42);
}

.village-hero-copy p {
    margin: 0;
    max-width: 620px;
    color: rgba(245, 239, 229, 0.9);
    line-height: 1.55;
}

.village-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    max-width: 610px;
}

.village-hero-stats div,
.village-status-card,
.village-policy-card,
.village-food-summary div {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    background: rgba(7, 8, 9, 0.72);
    padding: 13px 14px;
    backdrop-filter: blur(8px);
}

.village-hero-stats span,
.village-status-card span,
.village-policy-card span,
.village-food-summary span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.village-hero-stats strong,
.village-status-card strong,
.village-food-summary strong {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.village-command-panel,
.village-food-panel {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(94, 153, 87, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(22, 23, 25, 0.96), rgba(12, 13, 14, 0.98));
    box-shadow: inset 0 0 42px rgba(212, 175, 55, 0.05);
}

.village-command-panel {
    border-color: var(--village-state-color, var(--primary-gold));
}

.village-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 14px;
}

.village-panel-head h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 24px;
}

.village-happiness-meter,
.village-food-meter {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.village-happiness-meter i,
.village-food-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease, background 0.3s ease;
}

.village-state-subline {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.village-control-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(230px, 1fr) minmax(230px, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.village-status-card,
.village-policy-card {
    background: rgba(0, 0, 0, 0.28);
}

.village-status-card small,
.village-policy-card small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.village-food-meter {
    margin: 10px 0 7px;
}

.village-button-row {
    display: flex;
    gap: 6px;
}

.village-button-row .btn-clean {
    min-height: 38px;
}

.village-festival-box {
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.village-food-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.village-food-details {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.village-food-details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 14px 16px;
    color: #fff;
    font-weight: 800;
    list-style: none;
}

.village-food-details summary::-webkit-details-marker {
    display: none;
}

.village-food-details summary::after {
    content: "▾";
    color: var(--primary-gold);
    transition: transform 0.2s ease;
}

.village-food-details[open] summary::after {
    transform: rotate(180deg);
}

.village-food-details small {
    color: var(--text-muted);
    font-weight: 600;
}

.village-food-table-wrap {
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.village-food-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.village-food-table th {
    padding: 10px 8px;
    color: var(--text-muted);
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.village-food-table th:first-child {
    text-align: left;
}

.village-food-details p {
    margin: 10px 14px 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .village-control-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .village-hero-refresh,
    .village-hero-copy {
        aspect-ratio: auto;
        min-height: 310px;
    }

    .village-hero-copy,
    .village-command-panel,
    .village-food-panel {
        padding: 16px;
    }

    .village-hero-copy h1 {
        font-size: 34px;
    }

    .village-hero-stats,
    .village-panel-head {
        display: block;
    }

    .village-hero-stats div {
        margin-top: 8px;
    }

    .village-panel-head strong {
        display: block;
        margin-top: 8px;
    }

    .village-button-row {
        flex-direction: column;
    }

    .village-festival-box .btn-clean {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .adventure-hero,
    .adventure-intro-shell,
    .adventure-main-panel,
    .adventure-side-panel,
    .adventure-risk-card {
        padding: 14px;
    }

    .adventure-hero h2,
    .adventure-intro-shell h2 {
        font-size: 24px;
    }

    .adventure-select-row {
        display: grid;
        grid-template-columns: 1fr 96px;
        gap: 8px;
    }

    .adventure-select-row .btn-clean {
        width: 96px;
        flex-basis: 96px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .adventure-text {
        padding: 14px;
        min-height: 200px;
        font-size: 16px;
        line-height: 1.6;
    }

    .heart {
        width: 19px;
        font-size: 18px;
    }
}