/* Drachenkrieg – Dark-Fantasy-Oberfläche (Witcher/Oblivion-Anmutung).
   Farben und Schriften sind unten als Variablen gesammelt – leicht anpassbar. */
:root {
  --gold: #d9b45a;
  --gold-hi: #f3dd93;
  --gold-lo: #8a6420;
  --bg: #0f0c09;
  --bg2: #17120d;
  --panel: #1b1610;
  --panel2: #231c14;
  --line: rgba(217, 180, 90, .28);
  --text: #eadfc4;
  --muted: #a89a78;
  --blood: #9a2f22;
  --ember: #e07a2c;
  --good: #7fb86a;
  --bad: #e4614f;
  --warn: #e0b04a;
  --font-head: Cinzel, 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-body: 'Crimson Text', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background: var(--bg) var(--tex-bg, none);
  font-family: var(--font-body); font-size: 17px; line-height: 1.45;
  background-image: var(--tex-bg, none), radial-gradient(ellipse at 50% -10%, #2a1f12 0%, transparent 60%);
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--gold-hi); letter-spacing: .04em; margin: .2em 0 .5em; font-weight: 700; }
h2 { font-size: 1.5rem; } h3 { font-size: 1.12rem; display: flex; align-items: center; gap: .45rem; } h4 { font-size: 1rem; margin-top: 1em; }
a { color: var(--gold); }
p { margin: .4em 0 .7em; }
code { background: #00000055; padding: 1px 5px; border-radius: 3px; }
.muted { color: var(--muted); } .small { font-size: .88rem; } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ---------- Bausteine ---------- */
.panel {
  position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem;
  box-shadow: 0 6px 22px #0009, inset 0 0 0 1px #00000066, inset 0 1px 0 #ffffff0d;
}
.panel::before, .panel::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold-lo); pointer-events: none; opacity: .85; }
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }
.panel h3:first-child { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.divider { height: 20px; margin: .6rem 0; background: var(--divider) center/100% 100% no-repeat; }

.btn {
  font-family: var(--font-head); font-size: .85rem; letter-spacing: .05em; color: var(--gold-hi); cursor: pointer;
  background: linear-gradient(180deg, #2c2217, #1a140d); border: 1px solid var(--gold-lo); border-radius: 4px;
  padding: .5rem .9rem; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; transition: .15s;
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0007;
}
.btn:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 12px #d9b45a55, inset 0 1px 0 #ffffff1c; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: none; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #f0d487, #b78a2d 55%, #8a6420); color: #20160a; border-color: #f3dd93; text-shadow: 0 1px 0 #ffffff55; font-weight: 700; }
.btn.danger { background: linear-gradient(180deg, #7a2b21, #4a1511); border-color: #c0503e; color: #ffd7cf; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.on { outline: 2px solid var(--gold); background: linear-gradient(180deg, #3a2c17, #251a0d); }
.btn.small { padding: .32rem .65rem; font-size: .78rem; } .btn.tiny { padding: .12rem .45rem; font-size: .7rem; } .btn.big { padding: .75rem 1.4rem; font-size: 1rem; }
.btn .ic { width: 1.15em; height: 1.15em; }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

input, select, textarea {
  font: inherit; color: var(--text); background: #0d0a07; border: 1px solid #5a4620; border-radius: 4px; padding: .45rem .6rem; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px #d9b45a33; }
label { display: block; margin: .6rem 0 .2rem; font-size: .88rem; color: var(--muted); font-family: var(--font-head); letter-spacing: .04em; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .inline-form input[type=number] { width: 90px; } .inline-form input:not([type=number]), .inline-form select { flex: 1; min-width: 140px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; }

.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .55rem; border-radius: 99px; border: 1px solid var(--line); background: #0000004d; font-size: .8rem; margin: 0 .25rem .25rem 0; }
.chip.good { color: var(--good); border-color: #4c7a3e; } .chip.bad { color: var(--bad); border-color: #8a3a2e; } .chip.warn { color: var(--warn); border-color: #8a6a24; }
.chip.role { color: var(--gold-hi); border-color: var(--gold-lo); } .chip.me { border-color: var(--gold); color: var(--gold-hi); }
.chip .ic { width: 1em; height: 1em; }
.camp-chip { border-color: var(--cc); } .camp-chip .dot, .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--cc, var(--muted)); display: inline-block; box-shadow: 0 0 6px var(--cc, transparent); }
.chips { display: flex; flex-wrap: wrap; }

.beta-badge { display: inline-block; font-family: var(--font-head); font-size: .62rem; letter-spacing: .18em; padding: .12rem .45rem; border: 1px solid var(--ember); color: var(--ember); border-radius: 3px; background: #e07a2c1c; transform: translateY(-.5em); text-shadow: 0 0 8px #e07a2c88; }
.beta-badge.big { font-size: .9rem; transform: none; margin-left: .5rem; }

.ic { width: 1.25em; height: 1.25em; vertical-align: -.22em; flex: none; }
.ic.big { width: 2.2rem; height: 2.2rem; } .ic.emoji { font-style: normal; display: inline-grid; place-items: center; }
.banner-img { height: 40px; width: auto; filter: drop-shadow(0 3px 4px #000a); }
.banner-img.tiny { height: 20px; margin-right: .3rem; } .banner-img.large { height: 120px; } .banner-img.huge { height: 190px; }

.bar { position: relative; height: 20px; border: 1px solid var(--gold-lo); border-radius: 3px; background: #0b0805; overflow: hidden; margin: .3rem 0 .6rem; }
.bar i { display: block; height: 100%; background: linear-gradient(180deg, #e8c46a, #9a6f22); transition: width .4s; }
.bar.plot i { background: linear-gradient(180deg, #d4743a, #8a3216); } .bar.fort i { background: linear-gradient(180deg, #7aa0c8, #345a82); }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .75rem; color: #fff; text-shadow: 0 1px 2px #000; }
.cd { font-variant-numeric: tabular-nums; } .cd.soon { color: var(--ember); }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.tab { font-family: var(--font-head); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: .55rem .9rem; cursor: pointer; font-size: .9rem; display: inline-flex; gap: .4rem; align-items: center; }
.tab.on { color: var(--gold-hi); border-bottom-color: var(--gold); } .tab:hover { color: var(--gold); }
details > summary { cursor: pointer; font-family: var(--font-head); color: var(--gold); margin: .4rem 0; } details[open] > summary { margin-bottom: .6rem; }
.tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-family: var(--font-head); color: var(--gold); font-size: .8rem; } .tbl td, .tbl th { padding: .35rem .5rem; border-bottom: 1px solid #ffffff0f; }
.plain { margin: 0; padding-left: 1.1rem; } .rule-list { padding-left: 1.2rem; margin: .4rem 0; }

/* ---------- Kopf, Navigation ---------- */
.topbar { display: flex; align-items: center; gap: 1.2rem; padding: .55rem 1.2rem; flex-wrap: wrap; background: linear-gradient(180deg, #000000d0, #0b0805e6); border-bottom: 1px solid var(--gold-lo); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; } .brand img { height: 46px; width: auto; max-width: none; flex: none; }
.clock { flex: 1; min-width: 220px; text-align: center; } .phase { font-family: var(--font-head); color: var(--gold-hi); letter-spacing: .06em; }
.phase-game { text-shadow: 0 0 10px #e07a2c88; } .phase-ended { color: var(--muted); }
.wallet { display: flex; gap: .9rem; font-family: var(--font-head); } .wallet span { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 99px; background: #0006; }
.usermenu { position: relative; } .user-pop { position: absolute; right: 0; top: 110%; background: var(--panel); border: 1px solid var(--gold-lo); padding: .5rem; display: grid; gap: .4rem; min-width: 190px; z-index: 50; border-radius: var(--radius); }
.nav { display: flex; gap: .2rem; padding: .3rem 1rem; overflow-x: auto; background: #00000066; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; text-decoration: none; color: var(--muted); font-family: var(--font-head); font-size: .85rem; letter-spacing: .05em; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--gold); } .nav a.on { color: var(--gold-hi); border-bottom-color: var(--gold); background: linear-gradient(180deg, transparent, #d9b45a14); }
.nb { font-style: normal; background: var(--blood); color: #fff; border-radius: 99px; font-size: .68rem; padding: 0 .4rem; margin-left: .2rem; }
.view { max-width: 1500px; margin: 0 auto; padding: 1.1rem 1.2rem 2rem; }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 1.2rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.banner { padding: .5rem 1.2rem; text-align: center; font-family: var(--font-head); font-size: .88rem; letter-spacing: .04em; border-bottom: 1px solid var(--line); background: #2a1f12; }
.banner.announce { background: linear-gradient(90deg, #3a2a10, #4a3512, #3a2a10); color: var(--gold-hi); } .banner.bad { background: #3a1410; color: #ffb3a6; } .banner.warn { background: #3a2c10; color: var(--warn); }

/* ---------- Anmeldung ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2rem; padding: 2rem min(6vw, 5rem); background: radial-gradient(ellipse at 20% 30%, #3a2210aa, transparent 60%), radial-gradient(ellipse at 80% 70%, #5a141466, transparent 55%); }
.auth-logo { width: min(560px, 100%); height: auto; filter: drop-shadow(0 6px 24px #000); }
.tagline { font-family: var(--font-head); font-size: 1.3rem; color: var(--gold-hi); letter-spacing: .06em; margin: 1rem 0; }
.feature-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; } .feature-list li { display: flex; gap: .7rem; align-items: center; font-size: 1.05rem; } .feature-list .ic { width: 1.6rem; height: 1.6rem; }
.auth-card { max-width: 440px; width: 100%; justify-self: center; padding: 1.5rem; } .auth-err { min-height: 1.3em; margin: .5rem 0; font-size: .92rem; } .auth-card .btn { width: 100%; justify-content: center; }

/* ---------- Übersicht ---------- */
.phase-note { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; margin-bottom: .8rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: #d9b45a12; border-radius: var(--radius); }
.live-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .5rem; }
.live { white-space: nowrap; padding: .3rem .8rem; border-radius: 99px; font-size: .85rem; border: 1px solid var(--line); background: #0007; display: inline-flex; gap: .4rem; align-items: center; }
.live.war { border-color: var(--bad); color: #ffb3a6; animation: pulse 1.6s infinite; } .live.plan { border-color: var(--warn); color: var(--warn); } .live.comp { border-color: #5a8a8a; color: #b7e0e0; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.map-panel { padding: .7rem; } .map-host { border: 2px solid var(--gold-lo); border-radius: 4px; overflow: hidden; background: #000; line-height: 0; }
.legend { display: flex; gap: .9rem; font-size: .8rem; color: var(--muted); flex-wrap: wrap; } .legend i { display: inline-block; width: 18px; height: 3px; margin-right: .3rem; vertical-align: middle; } .lg-war { background: var(--bad); } .lg-camp { background: var(--gold); }
.side-col { display: flex; flex-direction: column; } .side-col .panel { margin-bottom: .8rem; }
.you-top { display: flex; gap: .9rem; align-items: center; } .you-top h3 { margin: 0; }
.avatar { width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, #3a2a14, #120d08); box-shadow: 0 0 14px #d9b45a44; flex: none; }
.you-act { margin: .8rem 0; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: var(--radius); background: #0005; } .you-act.busy { border-style: solid; border-color: var(--gold-lo); }
.act-label { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); } .act-cd { margin-left: auto; color: var(--gold-hi); font-size: 1.1rem; }
.wound { color: var(--bad); margin-bottom: .3rem; } .stance { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.you-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; } .stat { display: flex; flex-direction: column; align-items: center; padding: .35rem; border: 1px solid #ffffff12; border-radius: 4px; background: #0004; } .stat span { font-size: .68rem; color: var(--muted); font-family: var(--font-head); letter-spacing: .04em; } .stat b { font-size: 1.1rem; color: var(--gold-hi); }
.grid2 .stat { flex-direction: row; justify-content: space-between; align-items: center; }
.actions { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.qa { width: 100%; text-align: left; display: flex; gap: .7rem; align-items: center; padding: .55rem .7rem; color: var(--text); background: #0006; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font: inherit; }
.qa:hover:not(:disabled) { border-color: var(--gold); background: #d9b45a14; } .qa:disabled { opacity: .45; cursor: not-allowed; } .qa.hot { border-color: var(--gold); box-shadow: 0 0 12px #d9b45a33; }
.qa .ic { width: 1.7rem; height: 1.7rem; } .qa span { display: flex; flex-direction: column; } .qa small { color: var(--muted); font-size: .8rem; }
.eggbars, .rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .eggbars li, .rank li { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; }
.rank li { cursor: default; grid-template-columns: 200px 1fr 40px; } .rank li:has(.eb-name):not(:has(.eb-bar)) { grid-template-columns: 1fr 40px; }
.eb-name { display: flex; align-items: center; } .eb-bar { height: 10px; background: #0008; border-radius: 99px; overflow: hidden; border: 1px solid #ffffff14; } .eb-bar i { display: block; height: 100%; border-radius: 99px; box-shadow: 0 0 8px currentColor; transition: width .5s; } .eggbars b, .rank b { text-align: right; color: var(--gold-hi); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 440px; overflow-y: auto; } .ev { display: flex; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px solid #ffffff0d; } .ev-ic .ic { width: 1.4rem; height: 1.4rem; } .ev-t { font-family: var(--font-head); font-size: .88rem; color: var(--gold-hi); } .ev-b { font-size: .88rem; color: var(--text); } .ev-time { font-size: .72rem; color: var(--muted); }
.ev-war_start .ev-t, .ev-war_end .ev-t, .ev-camp_fallen .ev-t { color: #ff9c8a; } .ev-egg .ev-t { color: #ffb066; }
.events.missed { max-height: 50vh; }

/* ---------- Karte (SVG) ---------- */
.map-svg { width: 100%; height: auto; display: block; user-select: none; }
.road { fill: none; stroke: rgba(240, 215, 160, .32); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.place { cursor: pointer; } .place-ring { fill: rgba(15, 12, 9, .78); stroke: var(--gold); stroke-width: 2; transition: .2s; } .place:hover .place-ring { fill: rgba(60, 44, 20, .9); stroke-width: 3; }
.place.open .place-ring { stroke: #b57cff; filter: url(#glow); }
.place-name { font: 700 14px var(--font-head); fill: #f3e2b0; paint-order: stroke; stroke: #000; stroke-width: 4px; letter-spacing: .06em; }
.place-sub { font: 12px var(--font-body); fill: #e8d9ae; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.pbadge rect { fill: #1b1610; stroke: var(--gold-lo); } .pbadge text { font: 12px var(--font-body); fill: #f3e2b0; } .pbadge.pulse rect { stroke: var(--bad); animation: pulse 1.4s infinite; }
.map-ic { width: 100%; height: 100%; display: block; }
.camp { cursor: pointer; } .camp-aura { fill: var(--cc); opacity: .14; transition: .2s; } .camp:hover .camp-aura, .camp:focus .camp-aura { opacity: .38; }
.camp.mine .camp-aura { opacity: .3; stroke: var(--gold-hi); stroke-width: 2; stroke-dasharray: 4 4; }
.camp-shadow { fill: #000; opacity: .45; }
.camp.attacked .camp-aura { fill: #e4452f; opacity: .55; animation: pulse 1.1s infinite; }
.camp.bannerless image { filter: grayscale(.85) brightness(.6); }
.camp-name { font: 700 13px var(--font-head); fill: #f6e8c0; paint-order: stroke; stroke: #000; stroke-width: 4px; letter-spacing: .05em; }
.camp-sub { font: 11px var(--font-body); fill: #e4d6aa; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.eggbadge circle { fill: #c2461c; stroke: var(--gold-hi); stroke-width: 1.5; } .eggbadge text { font: 700 12px var(--font-head); fill: #fff; }
.heldbadge circle { fill: #2a2113; stroke: var(--gold); } .heldbadge text { font: 700 10px var(--font-head); fill: var(--gold-hi); }
.war-line { stroke-linecap: round; fill: none; } .war-line.planned { stroke: #e0b04a; stroke-width: 2.5; stroke-dasharray: 3 9; opacity: .85; }
.war-line.running { stroke: #e4452f; stroke-width: 3.5; stroke-dasharray: 12 8; animation: dash .9s linear infinite; filter: drop-shadow(0 0 4px #e4452f); }
.war-line.finished { stroke: #8a7a5a; stroke-width: 2; stroke-dasharray: 2 6; opacity: .6; }
.war-mark { cursor: pointer; } .war-mark circle { fill: #2a0f0b; stroke: #e4452f; stroke-width: 2; } .war-mark.planned circle { stroke: #e0b04a; fill: #2a200c; } .war-mark.finished circle { stroke: #8a7a5a; fill: #1a1610; }
.war-time { font: 700 12px var(--font-head); fill: #ffd7cf; paint-order: stroke; stroke: #000; stroke-width: 4px; }

/* ---------- Charakter ---------- */
.char-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1rem; align-items: start; } .char-grid .panel { margin-bottom: 0; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.pick { text-align: left; padding: .7rem; border: 1px solid var(--line); background: #0005; border-radius: 5px; color: var(--text); cursor: pointer; display: grid; gap: .2rem; font: inherit; } .pick small { color: var(--muted); font-size: .8rem; }
.pick:hover { border-color: var(--gold); } .pick.sel { border-color: var(--gold-hi); background: #d9b45a22; box-shadow: 0 0 14px #d9b45a44; } .pick b { font-family: var(--font-head); color: var(--gold-hi); }
.mods { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; font-size: .9rem; } .mods div { display: flex; justify-content: space-between; border-bottom: 1px dotted #ffffff14; } .mods b { color: var(--gold-hi); }
.talents { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; } .talents li { display: grid; grid-template-columns: 26px 1fr auto auto; gap: .5rem; align-items: center; } .tp { color: var(--gold); letter-spacing: .1em; font-size: .72rem; }
.slots { display: grid; gap: .3rem; margin-bottom: .8rem; } .slot { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: #0004; } .slot-l { width: 80px; font-family: var(--font-head); font-size: .75rem; color: var(--muted); }
.shop { display: grid; gap: .35rem; max-height: 340px; overflow-y: auto; } .item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem .5rem; border: 1px solid #ffffff12; border-radius: 4px; } .item.have { border-color: var(--gold-lo); } .item small { display: block; color: var(--muted); font-size: .76rem; } .item small.eff { color: #c8b98c; }
.branch { border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem .8rem; margin-bottom: .6rem; background: #0003; } .branch summary { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; padding-bottom: .6rem; }
.skill { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 5px; background: #0005; display: flex; flex-direction: column; gap: .3rem; } .skill.owned { border-color: var(--gold); background: #d9b45a14; } .skill.locked { opacity: .65; }
.sk-h { display: flex; justify-content: space-between; gap: .5rem; } .sk-h b { font-family: var(--font-head); font-size: .88rem; color: var(--gold-hi); } .rank { color: var(--gold); font-size: .78rem; } .sk-d { font-size: .85rem; color: var(--muted); } .sk-e { display: flex; flex-wrap: wrap; gap: .25rem; } .sk-e span { font-size: .72rem; border: 1px solid #ffffff1c; border-radius: 99px; padding: 0 .45rem; color: #d8c89a; } .sk-req { font-size: .76rem; color: var(--warn); } .skill .btn { align-self: flex-start; margin-top: auto; }
.bio { font-style: italic; color: var(--muted); }

/* ---------- Lager ---------- */
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
.camp-card { display: flex; gap: .8rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--cc) 60%, #000); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 16%, #0c0907), #0c0907); }
.cc-banner { flex: none; } .cc-body h3 { margin: 0; } .cc-stats { display: flex; gap: .8rem; color: var(--muted); font-size: .85rem; margin: .4rem 0; } .motto { font-style: italic; color: var(--gold); margin: .2rem 0; }
.camp-hero { display: flex; gap: 1.2rem; align-items: center; padding: 1rem 1.2rem; margin-bottom: 1rem; border: 1px solid var(--cc); border-radius: var(--radius); background: linear-gradient(100deg, color-mix(in srgb, var(--cc) 26%, #0c0907), #0c0907 70%); }
.camp-hero h2 { margin: 0; font-size: 1.9rem; } .camp-modal { display: flex; gap: 1.2rem; } .cm-banner { flex: none; } .cm-body { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .two-col .panel { margin-bottom: 0; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; } .role { padding: .6rem; border: 1px solid var(--line); border-radius: 5px; background: #0004; display: flex; flex-direction: column; gap: .3rem; } .role-h { display: flex; align-items: center; gap: .4rem; font-family: var(--font-head); color: var(--gold-hi); } .role small { color: var(--muted); font-size: .78rem; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem; } .member { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem .6rem; border: 1px solid #ffffff12; border-radius: 4px; background: #0003; } .member .dot { background: #555; } .member.online .dot { background: var(--good); box-shadow: 0 0 6px var(--good); } .member small { color: var(--muted); }

/* ---------- Krieg ---------- */
.plan-form { display: grid; gap: .3rem; max-width: 520px; } .plan-form .btn { margin-top: .6rem; align-self: start; }
.war-card { padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; margin-bottom: .6rem; } .war-card.running { border-color: var(--bad); box-shadow: 0 0 14px #e4452f33; } .war-card.threat.planned { border-color: var(--warn); }
.wc-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .vs { color: var(--bad); font-size: 1.2rem; }
.power { display: flex; gap: 3px; height: 34px; margin: .5rem 0; } .pw { display: grid; place-items: center; font-size: .78rem; padding: 0 .4rem; min-width: 80px; text-align: center; } .pw.att { background: linear-gradient(180deg, #a83a2c, #6a1d14); border-radius: 4px 0 0 4px; } .pw.def { background: linear-gradient(180deg, #3a6a9a, #1e3d5e); border-radius: 0 4px 4px 0; }
.finale { border-color: var(--ember); box-shadow: 0 0 22px #e07a2c33; }

/* ---------- Stadt ---------- */
.comp { padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; margin-bottom: .6rem; } .comp.joined { border-color: var(--gold); } .comp.running { border-color: var(--bad); }
.comp-h { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .comp-h b { font-family: var(--font-head); color: var(--gold-hi); } .comp-h small { display: block; color: var(--muted); }
.comp-b { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .88rem; margin: .4rem 0; color: var(--muted); } .chance { color: var(--gold-hi); } .entrants { display: flex; flex-wrap: wrap; }
.quest { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; margin-bottom: .5rem; } .quest.key { border-color: #8f5ad0; box-shadow: 0 0 10px #8f5ad033; } .quest.taken { border-color: var(--gold); } .quest b { font-family: var(--font-head); color: var(--gold-hi); } .quest small { display: block; color: var(--muted); } .rewards { display: flex; gap: .8rem; font-size: .9rem; }
.forest-panel { background: linear-gradient(180deg, #14231a, #0f1812); }
.prose { max-width: 900px; } .timeline { padding-left: 1.2rem; } .timeline li { margin-bottom: .4rem; }

/* ---------- Modal & Toasts ---------- */
.modal-wrap { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 100; padding: 1rem; animation: fade .2s; }
.modal { position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--gold); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: 0 0 40px #000, 0 0 30px #d9b45a22; } .modal.wide { width: min(780px, 100%); }
.modal-x { position: absolute; top: .4rem; right: .6rem; background: none; border: 0; color: var(--gold); font-size: 1.6rem; cursor: pointer; } .modal-title { margin-top: 0; padding-right: 2rem; }
#toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 200; max-width: min(380px, 92vw); }
.toast { padding: .65rem 1rem; border-radius: 5px; background: #1d1810; border: 1px solid var(--gold-lo); box-shadow: 0 4px 16px #000a; animation: slidein .25s; transition: .5s; } .toast.good { border-color: #5a9a4a; } .toast.bad { border-color: #b9473a; color: #ffd0c8; } .toast.out { opacity: 0; transform: translateX(20px); }

@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes fade { from { opacity: 0; } }
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1100px) {
  .ov-grid, .two-col, .char-grid { grid-template-columns: 1fr; } .auth-wrap { grid-template-columns: 1fr; padding: 1.5rem 1rem; } .you-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; } .topbar { padding: .4rem .7rem; gap: .5rem; } .brand img { height: 34px; } .clock { order: 5; min-width: 100%; } .view { padding: .7rem; } .two, .grid2, .mods { grid-template-columns: 1fr; }
  .camp-modal, .camp-hero { flex-direction: column; text-align: center; } .eggbars li { grid-template-columns: 100px 1fr 28px; } .nav a span { display: none; } .nav a { padding: .6rem .8rem; } .wallet { gap: .4rem; font-size: .85rem; }
}

/* ---------- Startseite: Drachenkrieg-Effekt ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.auth-wrap { position: relative; z-index: 1; background: linear-gradient(90deg, #07040add 0%, #07040a88 45%, #07040a22 100%); }
.auth-card { backdrop-filter: blur(6px); background: linear-gradient(180deg, #231c14ee, #1b1610ee); }
.credit { font-family: var(--font-head); letter-spacing: .14em; font-size: .95rem; color: var(--gold); margin: .4rem 0 .2rem; text-shadow: 0 2px 8px #000; }
.auth-hero .tagline, .feature-list li { text-shadow: 0 2px 10px #000; }

/* ---------- Einstieg / Anleitung ---------- */
.steps { font-family: var(--font-head); font-size: .85rem; color: var(--ember); letter-spacing: .06em; margin-bottom: .4rem; } .steps span { color: var(--muted); }
.tut { text-align: center; } .tut-ic .ic { width: 3.2rem; height: 3.2rem; } .tut h2 { margin-top: .3rem; } .tut p, .tut ul { text-align: left; }
.tut-dots { display: flex; justify-content: center; gap: .4rem; margin: .8rem 0 .2rem; } .tut-dots i { width: 9px; height: 9px; border-radius: 50%; background: #5a4620; } .tut-dots i.on { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.tut .row-btns { justify-content: center; }

/* ---------- Phasenplan ---------- */
.schedule { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.schedule li { display: grid; grid-template-columns: 92px 1fr auto; gap: .5rem; align-items: baseline; padding: .3rem .5rem; border-left: 3px solid #5a4620; font-size: .9rem; opacity: .6; }
.schedule li.current { opacity: 1; border-left-color: var(--good); background: #7fb86a14; } .schedule li.next { opacity: 1; border-left-color: var(--gold); background: #d9b45a12; }
.schedule li.upcoming { opacity: .85; } .sc-when { font-family: var(--font-head); font-size: .75rem; color: var(--gold); } .sc-cd { color: var(--gold-hi); font-family: var(--font-head); font-size: .8rem; white-space: nowrap; }

/* ---------- Wache (aktive Verteidigung) ---------- */
.stance-box { margin-top: .5rem; } .watch { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--muted); } .watch.on { color: var(--good); font-family: var(--font-head); }
.watch-set { margin-top: .5rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; } .watch-set label { margin: 0 0 .3rem; }
input[type=range] { padding: 0; height: 26px; accent-color: var(--gold); background: transparent; border: 0; }
.range-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: -.2rem; }

/* ---------- Kandidaten, unbekannte Wettstreite ---------- */
.cands { display: grid; gap: .25rem; margin: .3rem 0; } .cand { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem; border: 1px solid #ffffff12; border-radius: 4px; font-size: .88rem; } .cand.mine { border-color: var(--gold); background: #d9b45a14; } .cand span { color: var(--muted); margin-left: auto; font-size: .78rem; }
.comp.unknown { opacity: .75; border-style: dashed; }