:root {
    --glass: rgba(12, 9, 4, 0.70);
    --glass-lite: rgba(255, 240, 190, 0.035);
    --gline: rgba(245, 158, 11, 0.16);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #0b0905; color: #e5ddd0; min-height: 100vh; font-size: 16px;
}

body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 85% 55% at 12% 38%, rgba(110,55,5,0.10) 0%, transparent 65%),
                radial-gradient(ellipse 55% 45% at 88% 72%, rgba(60,30,3,0.08) 0%, transparent 60%);
}

/* Das fette Hintergrund-Wasserzeichen */
.bg-watermark {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: url('logo.png'); background-repeat: no-repeat;
    background-position: center center; background-size: 55vh;
    opacity: 0.03; filter: grayscale(100%) sepia(100%) hue-rotate(35deg) saturate(500%);
}

.cinzel { font-family: 'Cinzel', serif; }
.gilded { background: linear-gradient(135deg, #d97706 0%, #fbbf24 40%, #f59e0b 65%, #b45309 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.glass { background: var(--glass); backdrop-filter: blur(18px); border: 1px solid var(--gline); }
.glass-lite { background: var(--glass-lite); border: 1px solid rgba(245,158,11,0.10); }

.btn-gold { background: linear-gradient(135deg, #92400e, #b45309, #d97706); color: #fef3c7; font-family: 'Cinzel', serif; letter-spacing: 0.09em; transition: all 0.25s; box-shadow: 0 4px 16px rgba(180,83,9,0.30); }
.btn-gold:hover { background: linear-gradient(135deg, #b45309, #d97706, #f59e0b); transform: translateY(-2px); }

.guild-header { background: linear-gradient(180deg, rgba(8,6,2,0.98) 0%, rgba(18,12,2,0.96) 100%); border-bottom: 1px solid #78350f; }

.nav-btn { font-family: 'Cinzel', serif; color: rgba(180,83,9,0.75); border: 1px solid transparent; border-radius: 8px; transition: all 0.2s ease; }
.nav-btn:hover { color: #f59e0b; background: rgba(245,158,11,0.05); }
.nav-btn.active { background: linear-gradient(135deg, #78350f, #b45309); color: #fef3c7; box-shadow: 0 0 18px rgba(245,158,11,0.30); }

.tab-content, .atab-content { display: none; }
.tab-content.active, .atab-content.active { display: block; animation: fadeUp 0.38s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.atab-btn { font-family: 'Cinzel', serif; color: rgba(180,83,9,0.6); padding: 10px 0; border-bottom: 2px solid transparent; }
.atab-btn.atab-on { color: #fbbf24; border-bottom-color: #f59e0b; }

.raid-card { transition: transform 0.28s, box-shadow 0.28s; }
.raid-card:hover { transform: translateY(-5px); box-shadow: 0 16px 50px rgba(0,0,0,0.55), 0 0 24px rgba(245,158,11,0.10); }

.prog-track { background: rgba(255,255,255,0.055); border-radius: 99px; height: 6px; }
.prog-bar { height: 100%; width: 0%; border-radius: 99px; transition: width 1.3s; }
.prog-bar.go { width: var(--w); }

.bd-confirmed { background:rgba(6,95,70,0.45); border:1px solid rgba(6,95,70,0.7); color:#6ee7b7; }
.bd-bench { background:rgba(120,53,15,0.45); border:1px solid rgba(120,53,15,0.7); color:#fcd34d; }
.bd-declined { background:rgba(127,29,29,0.45); border:1px solid rgba(127,29,29,0.7); color:#fca5a5; }
.bd-pending { background:rgba(30,58,95,0.45); border:1px solid rgba(30,58,95,0.7); color:#93c5fd; }

.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); z-index: 9999; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal-box { background: rgba(10,7,2,0.97); border: 1px solid rgba(245,158,11,0.22); border-radius: 20px; }

.field { background: rgba(255,255,255,0.04); border: 1px solid rgba(245,158,11,0.18); border-radius: 9px; padding: 12px 16px; color: #e5ddd0; width: 100%; outline: none; }
.field:focus { border-color: rgba(245,158,11,0.55); }

.role-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(245,158,11,0.18); border-radius: 9px; padding: 12px; font-weight: 600; cursor: pointer; }
.role-btn.on { background: linear-gradient(135deg,#78350f,#b45309); color:#fef3c7; }

#toast { background: linear-gradient(135deg,#78350f,#b45309); transition: opacity 0.32s, transform 0.32s; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: #b45309; border-radius: 4px; }

/* ── Tier Badges ── */
.t4-badge { background: linear-gradient(135deg, #92400e, #b45309); }
.t5-badge { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.t6-badge { background: linear-gradient(135deg, #4c1d95, #7c3aed); }

/* ── Requirement Chips ── */
.rq-ok   { background: rgba(6,95,70,0.30);   border-color: rgba(6,95,70,0.60);   color: #6ee7b7; }
.rq-warn { background: rgba(120,53,15,0.30);  border-color: rgba(120,53,15,0.60); color: #fcd34d; }
.rq-bad  { background: rgba(127,29,29,0.30);  border-color: rgba(127,29,29,0.60); color: #fca5a5; }

/* ── Dividers ── */
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.35), transparent); margin: 2rem 0; }
.lore-line { text-align: center; color: rgba(180,140,80,0.5); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.2em; margin-bottom: 1.5rem; }

/* ── Stat Cards ── */
.stat-card { transition: transform 0.25s, box-shadow 0.25s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(245,158,11,0.08); }

/* ── Class Matrix bars ── */
.cbar { height: 100%; width: 0%; border-radius: 99px; transition: width 1.3s; }
.cbar.go { width: var(--cw); }