/* =====================================================
   SCHNÜDDELS – LIGHT THEME
   - Reines Theme
   - KEIN Layout
   - Nutzt exakt die Klassen aus style.css
===================================================== */

/* =====================================================
   CSS VARIABLES
===================================================== */

:root {
    --bg-main: #f7f3ea;
    --bg-card: rgba(255, 255, 255, 0.68);
    --bg-panel: rgba(255, 255, 255, 0.68);
    --card-bg: rgba(255, 255, 255, 0.68);
    --field-bg: rgba(255, 255, 255, 0.68);

    --frame-color: rgba(162, 106, 42, 0.55);

    --text-main: #2c2c2c;
    --text-muted: #6b6b6b;

    --accent: #8b6b2e;
    --accent-soft: #efe4c9;

    --ok: #4caf50;
    --err: #f44336;
    --btn-neutral: rgba(255, 255, 255, 0.55);
    --btn-green: rgba(76, 175, 80, 0.8);
    --btn-red: rgba(229, 57, 53, 0.8);
    --btn-gray: rgba(189, 189, 189, 0.6);
    --btn-green-strong: rgba(46, 125, 50, 0.9);

    --text-strong: #1f1f1f;
    --text-inverse: #ffffff;
    --text-dark: #2a2a2a;

    --border-soft: rgba(0,0,0,0.16);
    --border-soft-2: rgba(0,0,0,0.12);
    --border-soft-3: rgba(0,0,0,0.08);

    --bg-soft: rgba(255,255,255,0.52);
    --bg-soft-2: rgba(255,255,255,0.58);
    --bg-soft-3: rgba(244, 238, 220, 0.78);
    --card-glass-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.52), rgba(246, 241, 226, 0.46));
    --card-glass-hover-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(246, 241, 226, 0.52));
    --card-glass-border: rgba(162, 106, 42, 0.28);
    --card-glass-hover-border: rgba(162, 106, 42, 0.38);
    --card-glass-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    --card-glass-hover-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    --dialog-glass-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.54), rgba(247, 242, 229, 0.5));
    --dialog-glass-border: rgba(162, 106, 42, 0.3);
    --dialog-glass-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
    --quest-card-bg: rgba(255, 255, 255, 0.6);
    --quest-card-hover-bg: rgba(234, 227, 205, 0.78);
    --bg-overlay: rgba(0,0,0,0.45);
    --bg-surface: #ffffff;
    --bg-surface-hover: #f7f7f7;

    --shadow-strong: 0 12px 32px rgba(0,0,0,0.35);
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.22);
    --shadow-logo: 0 2px 2px rgba(0,0,0,0.2);

    --glass-header-gradient:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.06) 20%,
            rgba(0, 0, 0, 0.14) 50%,
            rgba(0, 0, 0, 0.06) 80%,
            rgba(0, 0, 0, 0.06) 100%),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.08) 20%,
            rgba(0, 0, 0, 0.13) 50%,
            rgba(0, 0, 0, 0.08) 80%,
            rgba(0, 0, 0, 0.08) 100%),
        radial-gradient(120% 180% at 50% 50%,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.08) 35%,
            rgba(255, 255, 255, 0.03) 100%);

    --btn-border-size: 4px;
    --btn-border-color: rgba(255, 255, 255, 0.95);
    --btn-text: #ffffff;
    --btn-fill: transparent;
    --btn-bg-image: linear-gradient(135deg, #48ff27, #2e7d32);
    --btn-shadow: 0 10px 22px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.35);
    --btn-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.3), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    --btn-shadow-active: 0 6px 14px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.25);
    --btn-focus-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 10px 22px rgba(0, 0, 0, 0.25);

    --btn-disabled-fill: #9a9a9a;
    --btn-disabled-bg-image: none;
    --btn-disabled-text: rgba(255, 255, 255, 0.9);
    --btn-disabled-border: #7a7a7a;
    --btn-disabled-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.25);

    --btn-loading-fill: transparent;
    --btn-loading-bg-image: linear-gradient(120deg, #48ff27, #2e7d32, #48ff27);
    --btn-loading-size: 200% 100%;
    --btn-loading-anim: pill-gradient-move 1.2s linear infinite;
    --btn-loading-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.25), 0 8px 18px rgba(0, 0, 0, 0.35);
    --btn-loading-text: rgba(255, 255, 255, 0.85);

    --btn-send-fill: rgba(46, 125, 50, 0.95);
    --btn-send-text: #ffffff;
    --btn-send-border: rgba(255, 255, 255, 0.7);
    --btn-send-shadow: 0 8px 18px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);

    --btn-danger-fill: #d32f2f;
    --btn-danger-bg-image: none;
    --btn-danger-text: #ffffff;
    --btn-danger-border: rgba(255, 255, 255, 0.95);
    --btn-danger-shadow: 0 10px 22px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.25);
    --btn-danger-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.3), inset 0 2px 6px rgba(255, 255, 255, 0.3);
    --btn-danger-shadow-active: 0 6px 14px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    --btn-danger-focus-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 10px 22px rgba(0, 0, 0, 0.25);

    --btn-secondary-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.8));
    --btn-secondary-text: #2c2c2c;
    --btn-secondary-border: rgba(255, 255, 255, 0.9);
    --btn-secondary-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    --btn-secondary-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 2px 6px rgba(255, 255, 255, 0.35);
    --btn-secondary-shadow-active: 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    --btn-secondary-focus-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 10px 22px rgba(0, 0, 0, 0.2);

    --badge-bg: #e53935;
    --badge-text: #ffffff;
    --badge-border: rgba(255, 255, 255, 0.9);
    --badge-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);

    --info-btn-bg: rgba(255, 255, 255, 0.7);
    --info-btn-text: #2c2c2c;
    --info-btn-border: rgba(0, 0, 0, 0.18);

    --collapse-hover-bg: rgba(0, 0, 0, 0.06);
}

/* =====================================================
   GLOBAL
===================================================== */

body {
    background-image: url("/assets/images/bg-light.png");
    color: var(--text-main);
}

/* =====================================================
   CARDS
===================================================== */

.card {
    background: var(--card-glass-bg);
    border: var(--border-width) solid var(--card-glass-border);
}

/* =====================================================
   GAME HEADER / LOGO
===================================================== */

.game-header {
    background-image: var(--glass-header-gradient), url("/assets/images/header.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: calc(var(--border-width) * 2) solid var(--frame-color);
}

.header-logo {
    filter: drop-shadow(var(--shadow-logo));
}

/* =====================================================
   HUD TOP – WÄHRUNGEN
===================================================== */

#hud-top {
    background: transparent;
}

.hud-currency {
    background: var(--accent-soft);
    border: var(--border-width) solid var(--frame-color);
    color: var(--text-main);
}

.hud-currency img {
    image-rendering: pixelated;
}

/* =====================================================
   HUD STATUS
===================================================== */

.hud-status {
    color: var(--text-muted);
}

.hud-status .ok {
    color: var(--ok);
}

.hud-status .err {
    color: var(--err);
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-secondary {
    --btn-fill: var(--btn-secondary-fill);
    --btn-bg-image: none;
    --btn-text: var(--btn-secondary-text);
    --btn-border-color: var(--btn-secondary-border);
    --btn-shadow: var(--btn-secondary-shadow);
    --btn-shadow-hover: var(--btn-secondary-shadow-hover);
    --btn-shadow-active: var(--btn-secondary-shadow-active);
    --btn-focus-shadow: var(--btn-secondary-focus-shadow);
}

.btn-danger {
    --btn-fill: var(--btn-danger-fill);
    --btn-bg-image: var(--btn-danger-bg-image);
    --btn-text: var(--btn-danger-text);
    --btn-border-color: var(--btn-danger-border);
    --btn-shadow: var(--btn-danger-shadow);
    --btn-shadow-hover: var(--btn-danger-shadow-hover);
    --btn-shadow-active: var(--btn-danger-shadow-active);
    --btn-focus-shadow: var(--btn-danger-focus-shadow);
    font-weight: 700;
}

/* 3D Button bleibt bewusst neutral – nur Farbton */
.btn-3d {
    background: var(--accent-soft);
    color: var(--text-dark);
}

/* =====================================================
   BUILDINGS
===================================================== */

/* .building-card {
    background: var(--bg-panel);
    border: 2px solid var(--frame-color);
} */

.building-production,
.building-costs {
    color: var(--text-muted);
}

.production-row .bonus {
    color: var(--accent);
}

/* =====================================================
   DIALOG
===================================================== */

.dialog-box {
    background: var(--dialog-glass-bg);
    border: var(--border-width) solid var(--dialog-glass-border);
}

.dialog-section {
    border-top: 1px solid var(--border-soft-2);
}

.dialog-section-title {
    color: var(--accent);
}

/* =====================================================
   HUD BOTTOM
===================================================== */

#hud-bottom {
    background: transparent;
}

/* =====================================================
   INPUTS / SELECTS
===================================================== */

input,
select {
    background: var(--field-bg);
    border: var(--border-width) solid var(--frame-color);
    color: var(--text-main);
}

/* =====================================================
   SMALL TEXT
===================================================== */

.small-note {
    color: var(--text-muted);
}

/* Abenteuer-Dauer Auswahl */
.adv-duration.active {
    color: var(--ok);
    font-weight: bold;
}