/* Drachenfest – 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 #c9ced6; color: #d8dce3; border-radius: 3px; background: #c9ced61c; transform: translateY(-.5em); text-shadow: 0 0 8px #c9ced688; }
.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(255, 255, 255, .42); stroke-width: 2.6; stroke-dasharray: 2 7; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .35)); }
.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: .42; stroke: rgba(255, 255, 255, .5); stroke-width: 2.5; transition: .2s; } .camp:hover .camp-aura, .camp:focus .camp-aura { opacity: .62; }
.camp.mine .camp-aura { opacity: .5; stroke: var(--gold-hi); stroke-width: 3; 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 auto; gap: .5rem; align-items: center; } .tw { color: var(--text, #eee); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; } .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); }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pz .topbar { position: static; }
.map-zoom { position: absolute; top: .4rem; left: .4rem; display: flex; flex-direction: row; gap: .3rem; z-index: 3; line-height: 1; }
.map-zoom button { width: 2.1rem; height: 2.1rem; border: 1px solid var(--gold-lo); border-radius: 6px; background: #000b; color: var(--gold-hi); font-size: 1.2rem; cursor: pointer; }
.map-zoom button:hover { border-color: var(--gold); }
.map-host { touch-action: pan-y; }
.tipbox.hint { margin: .3rem 0; } .tipbox.hint .hint-body { padding: .3rem .1rem .1rem; } .tipbox.hint .hint-body p { margin: .3rem 0; }
@media (max-width: 640px) {
  .topbar { gap: .3rem; padding: .3rem .6rem; } .clock { font-size: .72rem; line-height: 1.15; } .clock .phase { letter-spacing: 0; } .clock .small { font-size: .68rem; } .clock .help-btn { transform: scale(.8); }
  .banner { padding: .3rem .6rem; font-size: .75rem; }
  body { font-size: 16px; } .topbar { padding: .3rem .6rem; gap: .3rem; } .brand img { height: 30px; } .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: Drachenfest-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; }

.help-btn { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--gold); background: #d9b45a22; color: var(--gold-hi); font-family: var(--font-head); font-weight: 700; cursor: pointer; margin-left: .3rem; vertical-align: middle; } .help-btn:hover { background: var(--gold); color: #20160a; box-shadow: 0 0 10px #d9b45a88; }
.motto small { font-family: var(--font-head); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }
.city-intro { border-color: var(--gold-lo); }

/* ---------- Aktionsliste mit eigenen Buttons ---------- */
.qa-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 5px; background: #0006; }
.qa-row.hot { border-color: var(--gold); box-shadow: 0 0 12px #d9b45a33; } .qa-row > .ic { width: 1.7rem; height: 1.7rem; }
.qa-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .qa-text small { color: var(--muted); font-size: .8rem; }
.qa-row .btn { flex: none; }
.watch-warn { margin: .5rem 0 .2rem; padding: .4rem .6rem; border-left: 3px solid var(--warn); background: #e0b04a14; font-size: .85rem; color: var(--warn); }

/* ---------- Spionage ---------- */
.spy-report { margin: .6rem 0; padding: .6rem .7rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); background: #0004; } .spy-h { margin-bottom: .4rem; }

/* ---------- Übersicht: Hauptspalte (Karte, Phasenplan, Weltgeschehen) ---------- */
.main-col { min-width: 0; display: flex; flex-direction: column; } .main-col .panel { margin-bottom: 1rem; }
.egg-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .egg-cell .age { color: var(--muted); font-size: .68rem; }
.rank li:has(.egg-cell) { grid-template-columns: 180px 1fr 150px; }
.eggbadge.stale circle { fill: #4a3a22; stroke: var(--gold-lo); }

/* ---------- Gilden ---------- */
.guild { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; margin-bottom: .6rem; } .guild-h { display: flex; gap: .7rem; align-items: center; } .guild-h b { font-family: var(--font-head); color: var(--gold-hi); } .guild-h small { display: block; color: var(--muted); }
.guild-b { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 0; }

/* ---------- Story-Modus & Hilfe ---------- */
.ev-story { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; padding: .45rem .6rem; border-left: 3px solid var(--ember); background: #e07a2c10; font-style: italic; color: #e8d6ae; font-size: .9rem; } .ev-story .ic { flex: none; margin-top: .15rem; }
.story-panel { border-color: var(--ember); }
.help-phase { margin: .5rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: #0003; } .help-phase > summary { padding: .6rem .9rem; margin: 0; list-style: none; cursor: pointer; font-family: var(--font-head); color: var(--gold-hi); } .help-phase > summary::before { content: '▸ '; color: var(--gold); } .help-phase[open] > summary::before { content: '▾ '; }
.help-body { padding: 0 1rem .8rem; } .help-body h4 { margin: .8rem 0 .2rem; color: var(--gold); }

/* ---------- Aufruf zur Schlacht ---------- */
.battle-call { border-color: var(--warn); background: linear-gradient(180deg, #3a2c10, #1f1710); box-shadow: 0 0 18px #e0b04a33; } .battle-call.marching { border-color: var(--bad); }
.battle-call.alarm { border-color: var(--bad); background: linear-gradient(180deg, #3a1410, #1f100d); animation: pulse 2s infinite; }
.march-mark { cursor: pointer; } .march-mark circle { fill: #2a0f0b; stroke: #e4452f; stroke-width: 2; animation: pulse 1.2s infinite; }

/* ---------- Lagerplot-Auswahl ---------- */
.plot-offers { display: grid; gap: .5rem; margin: .4rem 0; } .plot-offer { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #0004; display: flex; flex-direction: column; gap: .3rem; } .plot-offer b { font-family: var(--font-head); color: var(--gold-hi); } .plot-offer small { color: var(--muted); } .po-meta { display: flex; flex-wrap: wrap; } .plot-offer .btn { align-self: flex-start; }

.prep { color: var(--gold-hi); font-size: .85rem; } .prep-note { padding: .5rem .7rem; border-left: 3px solid var(--gold); background: #d9b45a10; border-radius: 4px; }

/* ---------- Charakterprofil ---------- */
.plink { color: var(--gold-hi); text-decoration: none; cursor: pointer; border-bottom: 1px dotted var(--gold-lo); } .plink:hover { color: var(--gold); border-bottom-style: solid; }
.profile .pf-head { display: flex; gap: 1rem; align-items: center; } .profile .pf-head h3 { margin: 0; } .pf-banner { margin-left: auto; } .pf-row { margin: .25rem 0; } .pf-row b { font-family: var(--font-head); font-size: .8rem; color: var(--gold); margin-right: .4rem; }

.spy-chance { padding: .45rem .7rem; border-left: 3px solid var(--gold); background: #d9b45a10; border-radius: 4px; font-size: .92rem; }

/* ---------- Banner auf der Karte ---------- */
.camp.ownlost .mainbanner { filter: grayscale(.9) brightness(.55); } .banner-x { stroke: #e4452f; stroke-width: 4; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 3px #000); }
.nobanner { font: 700 11px var(--font-head); fill: #ff8a7a; paint-order: stroke; stroke: #000; stroke-width: 3px; letter-spacing: .05em; }
.mini-banner image { filter: drop-shadow(0 1px 2px #000); }
.held-b { display: inline-flex; align-items: center; margin-right: .3rem; }

.stars { color: var(--gold); letter-spacing: .08em; } .stars.s3 { color: #e4614f; }

.persist-note { margin: .6rem 0; padding: .6rem .9rem; border-left: 3px solid var(--gold); background: #d9b45a10; border-radius: 4px; font-size: .92rem; } .persist-note p { margin: .3rem 0; }

.license { font-family: var(--font-head); letter-spacing: .08em; font-size: .85rem; color: var(--muted); margin: 0 0 .4rem; text-shadow: 0 2px 8px #000; }

.finale label { display: block; margin-top: .5rem; font-size: .85rem; color: var(--muted, #b9a888); }
.finale select { width: 100%; margin: .2rem 0 .5rem; }
.modal .tbl { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-size: .9rem; }
.modal .tbl th, .modal .tbl td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid #ffffff14; }
.modal details { margin: .3rem 0; padding: .3rem .6rem; border-left: 3px solid var(--gold-lo, #8a6420); background: #ffffff08; border-radius: 4px; }
.modal details ul { margin: .4rem 0 .4rem 1.1rem; padding: 0; }

.btn:disabled[title] { cursor: help; }
.xp-note { margin: .5rem 0; padding: .45rem .8rem; border-left: 3px solid var(--gold); background: #d9b45a12; border-radius: 4px; font-size: .92rem; }

.role-tasks { margin: .4rem 0 .3rem 1.1rem; padding: 0; font-size: .88rem; } .role-tasks li { margin: .2rem 0; }
.role-when { margin: .3rem 0; font-size: .85rem; color: var(--muted, #b9a888); }

.finale-place .place-ring { stroke: #e4452f; fill: #3a0f0acc; filter: drop-shadow(0 0 10px #e4452f99); }
.finale-place.pulse .place-ring { animation: pulseRing 1.6s ease-in-out infinite; }
@keyframes pulseRing { 0%,100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
.live-tbl .lbar { height: 6px; background: #ffffff1a; border-radius: 3px; margin-bottom: 2px; min-width: 80px; } .live-tbl .lbar i { display: block; height: 100%; background: linear-gradient(90deg, #b3262e, #e0b04a); border-radius: 3px; }
.live-tbl tr.out { opacity: .45; } .live-tbl tr.mine td { background: #d9b45a14; }
.panel.finale.live { border-color: #e4452f; }

.sleep-chip { font-size: .9rem; padding: .2rem .6rem; border: 1px solid #6b7fd7; border-radius: 999px; background: #1b2350aa; white-space: nowrap; }
.sleep-chip[hidden] { display: none; }
.bonus-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.bonus-list li.off { opacity: .55; }
.online-count { display: flex; align-items: center; gap: .35rem; font-size: .9rem; padding: .2rem .6rem; border: 1px solid var(--gold-lo); border-radius: 999px; background: #00000066; white-space: nowrap; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #5bd36a; box-shadow: 0 0 6px #5bd36a; display: inline-block; }
.choose-note { border-left-color: #e0b04a; }

/* Wochenleiste über der Karte */
.timeline { padding: .7rem 1rem .9rem; }
.tl-head { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: baseline; margin-bottom: .5rem; } .tl-head h3 { margin: 0; } .tl-next { color: var(--muted, #b9a888); font-size: .9rem; margin-left: auto; }
.tl-bar { position: relative; height: 64px; }
.tl-days { position: absolute; inset: 0 0 auto 0; height: 20px; }
.tl-day { position: absolute; top: 0; height: 20px; text-align: center; font-size: .78rem; border-left: 1px solid #ffffff22; color: #b9a888; } .tl-day.today { color: var(--gold, #d9b45a); background: #d9b45a14; } .tl-day b { font-weight: 600; }
.tl-segs { position: absolute; left: 0; right: 0; top: 24px; height: 26px; background: #00000055; border-radius: 6px; overflow: hidden; border: 1px solid var(--gold-lo, #8a6420); }
.tl-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; white-space: nowrap; overflow: hidden; background: #3a2d12; border-right: 1px solid #00000099; color: #d9c79a; }
.tl-seg.tl-choose { background: #2d3b57; } .tl-seg.tl-coordinate { background: #4a3a1c; } .tl-seg.tl-game { background: #5a2420; } .tl-seg.tl-ended { background: #3b2a55; }
.tl-seg.done { opacity: .55; } .tl-seg.cur { box-shadow: inset 0 0 0 2px var(--gold, #d9b45a); color: #fff; font-weight: 600; }
.tl-pin { position: absolute; top: 49px; transform: translateX(-50%); font-size: .85rem; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.tl-marker { position: absolute; top: 18px; bottom: 6px; width: 0; z-index: 3; } .tl-marker i { position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: #ff5e4a; box-shadow: 0 0 8px #ff5e4a; border-radius: 2px; } .tl-marker i::before { content: ''; position: absolute; left: -4px; top: -6px; border: 5.5px solid transparent; border-top-color: #ff5e4a; }
@media (max-width: 700px) { .tl-seg span { display: none; } .tl-next { margin-left: 0; } }

.nav { align-items: center; }
.nav-status { margin-left: auto; display: flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border: 1px solid var(--gold-lo); border-radius: 999px; background: #00000066; font-size: .85rem; white-space: nowrap; flex-shrink: 0; }
.nav-status.busy { border-color: var(--gold); background: #d9b45a1a; } .nav-status.hurt { border-color: #b3262e; }
.nav-status .ns-cd { font-variant-numeric: tabular-nums; color: var(--gold, #d9b45a); font-weight: 600; } .nav-status .ns-hurt { color: #ff8a7a; }
@media (max-width: 700px) { .nav-status { font-size: .78rem; padding: .2rem .5rem; } }

.item-act { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.panel.active-wars { border-color: #e4452f; box-shadow: 0 0 14px #e4452f33; }

.war-calc { margin-top: .5rem; padding: .4rem .7rem; border-left: 3px solid var(--gold-lo, #8a6420); background: #ffffff08; border-radius: 4px; }
.war-calc summary { cursor: pointer; font-weight: 600; } .war-calc h4 { margin: .7rem 0 .2rem; }
.power-big { display: flex; gap: 1rem; margin: .5rem 0; } .power-big div { flex: 1; text-align: center; padding: .4rem; border: 1px solid var(--gold-lo, #8a6420); border-radius: 6px; background: #00000044; } .power-big small { display: block; color: #b9a888; } .power-big b { font-size: 1.4rem; }
.calc-tbl { width: 100%; font-size: .85rem; margin: .3rem 0; } .calc-list { margin: .3rem 0 .3rem 1rem; padding: 0; } .calc-verdict { margin-top: .6rem; }

.battle-alert { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; background: linear-gradient(90deg, #5a1612, #3a0f0a); border: 1px solid #e4452f; color: #ffd9d0; position: sticky; top: 56px; z-index: 35; }
.battle-alert.defend { background: linear-gradient(90deg, #3a2a0a, #2a1a05); border-color: #e0b04a; }
.btn.blink { animation: blinkBtn 1s ease-in-out infinite; }
@keyframes blinkBtn { 0%, 100% { box-shadow: 0 0 0 0 #ff5e4a00; filter: brightness(1); } 50% { box-shadow: 0 0 14px 3px #ff5e4acc; filter: brightness(1.35); } }

.member { flex-wrap: wrap; }
.m-act { flex-basis: 100%; display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted, #b9a888); margin: .1rem 0 .2rem 1.1rem; } .m-seen.on { color: #5bd36a; } .m-task { display: inline-flex; align-items: center; gap: .3rem; }

.board { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; max-height: 360px; overflow-y: auto; }
.note { padding: .5rem .7rem; background: #d9b45a14; border: 1px solid #8a642055; border-left: 4px solid var(--gold, #d9b45a); border-radius: 4px; transform: rotate(-.2deg); }
.note.foreign { background: #5b7ad41a; border-left-color: #6a8bff; }
.n-text { font-size: .95rem; } .n-meta { margin-top: .3rem; font-size: .78rem; color: var(--muted, #b9a888); }

.req-missing { color: #ff7a6a; font-weight: 600; }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 1000px) { .three-col { grid-template-columns: 1fr; } }

.story-modes .btn { text-align: left; min-width: 190px; } .story-modes small { opacity: .8; font-weight: normal; }

.battle-alert { justify-content: center; text-align: center; gap: 1rem; } .battle-alert .ba-text { flex: 0 1 auto; }
.popup-text { font-size: 1.02rem; line-height: 1.5; margin-bottom: 1rem; white-space: normal; }

.tipbox { margin: .3rem 0; font-size: .85rem; } .tipbox summary { cursor: pointer; color: var(--muted, #b9a888); list-style: none; display: inline-block; padding: .1rem .5rem; border: 1px solid var(--gold-lo, #8a6420); border-radius: 999px; } .tipbox summary::-webkit-details-marker { display: none; } .tipbox[open] summary { color: var(--gold, #d9b45a); } .tipbox p { margin: .4rem 0 0; }

/* Siegerlager-Feuerwerk beim Abschlussritual */
.fw-p { animation: fwBurst 3.2s ease-out infinite; opacity: 0; transform: translate(0, 0); filter: drop-shadow(0 0 3px currentColor); }
@keyframes fwBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 6% { opacity: 1; } 35% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); } 70% { opacity: .8; transform: translate(var(--dx), calc(var(--dy) + 14px)) scale(.8); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) scale(.3); } }

.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--gold-lo); border-radius: 999px; background: #00000055; font-size: .85rem; }
.badge small { display: block; font-size: .7rem; opacity: .75; }
.badge.got { border-color: var(--gold); box-shadow: 0 0 6px #d4a84b55; }
.badge.locked { opacity: .4; filter: grayscale(1); }
.spy-item { border: 1px solid var(--gold-lo); border-radius: 8px; margin: .4rem 0; padding: .3rem .6rem; background: #00000033; }
.spy-item summary { cursor: pointer; }

.shame-board { margin-top: 1rem; padding: .6rem .8rem; border: 2px dashed var(--gold-lo); border-radius: 8px; background: #2a1a0f66; }
.shame-note { padding: .35rem .6rem; margin: .35rem 0; border-left: 4px solid var(--gold-lo); background: #00000044; }
.shame-note.bad { border-left-color: var(--bad); }

/* Schmale Bildschirme / Handy: Reihenfolge Woche, Charakter, Karte, Aktionen, Weltgeschehen, Phasenplan */
@media (max-width: 1100px) {
  .ov-grid .main-col, .ov-grid .side-col { display: contents; }
  .ov-week { order: 1; } .ov-you { order: 2; } .ov-map { order: 3; } .ov-actions { order: 4; } .ov-world { order: 5; } .ov-sched { order: 6; }
}

/* Menü: voller Text -> 3-Buchstaben-Kürzel -> nur Icons */
.nav a .nl-abbr { display: none; }
@media (max-width: 1100px) { .nav a .nl-full { display: none; } .nav a .nl-abbr { display: inline; } .nav a { padding: .55rem .6rem; gap: .3rem; } }
@media (max-width: 640px) { .nav a .nl-abbr { display: none; } .nav a { padding: .6rem .7rem; } }

/* Spieler-Chips: Lagerfarbe, Umrandung, Online-Punkt */
.pchip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--cc, #888); color: var(--cc, #ccc); background: color-mix(in srgb, var(--cc, #888) 14%, transparent); text-decoration: none; cursor: pointer; padding: .1rem .55rem; }
.pchip:hover { background: color-mix(in srgb, var(--cc, #888) 28%, transparent); }
.pchip .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cc, #888); display: inline-block; flex: none; }
.pchip.off .dot { opacity: .3; box-shadow: none; }
.pchip.on .dot { opacity: 1; box-shadow: 0 0 6px 2px var(--cc, #888), 0 0 2px #fff inset; }
.pchip.me { outline: 1px solid var(--gold); }

.char-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.char-row { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: #0003; }
.char-row.on { border-color: var(--gold); }

/* Pyrianders Mystery Shop */
.pyri-temple { width: 100%; max-width: 760px; display: block; margin: .6rem auto; border: 2px solid var(--gold-lo); border-radius: 10px; background: #0b0820; }
.pyri-temple .neon { font-family: var(--font-head, Georgia, serif); font-weight: 700; font-size: 22px; letter-spacing: .12em; fill: #aaffff; stroke: #55f4ff; stroke-width: .6; paint-order: stroke; filter: drop-shadow(0 0 4px #28e0ff) drop-shadow(0 0 10px #28e0ff); animation: neonflick 4.5s infinite; }
.pyri-temple .neon2 { font-size: 15px; fill: #ffc4f6; stroke: #ff6fe0; filter: drop-shadow(0 0 4px #ff3fd0) drop-shadow(0 0 10px #ff3fd0); animation-delay: .8s; }
.pyri-temple .torch ellipse { animation: torch 1.2s infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes neonflick { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
@keyframes torch { from { transform: scale(1, 1); } to { transform: scale(.85, 1.15); } }
.neon-txt { color: #aaffff; text-shadow: 0 0 6px #28e0ff, 0 0 14px #28e0ff; }
.shop-stories, .shop-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin: .5rem 0 1rem; }
.shop-story, .shop-item { border: 1px solid var(--gold-lo); border-radius: 8px; padding: .6rem .8rem; background: #00000040; }
.ss-h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ss-dots { display: inline-flex; gap: .25rem; }
.sdot { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid var(--gold-lo); display: inline-block; }
.sdot.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.sdot.act { background: #5ae; animation: pulse 1.4s infinite; }
.shop-reader { border: 2px solid var(--gold); border-radius: 10px; padding: .8rem 1.1rem; margin: .8rem 0; background: linear-gradient(180deg, #2a180b99, #0006); }
.sr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.sr-text p { line-height: 1.65; margin: .7rem 0; max-width: 70ch; }
.sr-text p.sr-stage { font-style: italic; color: var(--gold-hi, #f0d27a); padding-left: .8rem; border-left: 3px solid var(--gold-lo); }
.si-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.shop-item.sold { opacity: .92; }
.soldout { display: inline-block; transform: rotate(-4deg); border: 3px solid var(--bad, #c0392b); color: var(--bad, #c0392b); font-weight: 800; letter-spacing: .15em; padding: .1rem .6rem; margin: .3rem 0; }

/* Schlaf-Info kompakt */
.sleep-sum { border: 1px solid var(--line); border-radius: 8px; background: #0003; padding: .25rem .6rem; margin-bottom: .4rem; font-size: .9rem; }
.sleep-sum.good { border-color: #4c7a3e; } .sleep-sum.bad { border-color: #8a3a2e; }
.sleep-sum summary { display: flex; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.sleep-sum summary::-webkit-details-marker { display: none; }
.sleep-sum .ss-main { min-width: 0; }
.sleep-sum .ss-more { color: var(--gold); border: 1px solid var(--gold-lo); border-radius: 50%; width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .8rem; }
.sleep-sum[open] .ss-more { background: var(--gold-lo); color: #000; }
.ss-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .2rem; }
.ss-list li { display: flex; justify-content: space-between; gap: .6rem; }
.ss-list .ss-sum { border-top: 1px solid var(--line); padding-top: .2rem; }

.sr-truth { font-style: italic; color: var(--gold-hi, #f0d27a); border-top: 1px dashed var(--gold-lo); padding-top: .5rem; margin-top: .8rem; }

.roster { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .4rem 0; }

/* Weltnachrichten: Eroberung vs. Verteidigung */
.ev-war_end.ev-conq { border-left: 4px solid #d9534f; background: linear-gradient(90deg, #d9534f1f, transparent 60%); }
.ev-war_end.ev-def { border-left: 4px solid #5cb85c; background: linear-gradient(90deg, #5cb85c1a, transparent 60%); }
.ev-war_end.ev-def .ev-t { color: #9be09b; }
.cname { text-shadow: 0 0 6px #000; }
.ev-comp_end { border-left: 4px solid var(--gold); }

.sr-sep { text-align: center; letter-spacing: .6em; color: var(--gold-lo); }

.btn.neon-btn { color: #aaffff; border-color: #55f4ff; text-shadow: 0 0 6px #28e0ff; box-shadow: 0 0 8px #28e0ff, 0 0 18px #28e0ff55, inset 0 0 8px #28e0ff44; animation: neonflick 4.5s infinite; }
.sr-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }

.pyri-temple .neon.off { fill: #3a3a44; stroke: #2a2a33; filter: none; animation: none; opacity: .8; }
.pyri-temple .neon2.off { fill: #3a3a44; stroke: #2a2a33; filter: none; }

/* Tyren Nightfire Nightfire */
.ninja { cursor: pointer; }
.ninja .nj-f { animation-duration: 1.4s; animation-iteration-count: infinite; animation-timing-function: step-end; }
.ninja .nj-f1 { animation-name: njA; }
.ninja .nj-f2 { animation-name: njB; }
@keyframes njA { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes njB { 0%, 49.99% { opacity: 0; } 50%, 100% { opacity: 1; } }
.ninja:hover { filter: drop-shadow(0 0 4px #fff); }
.tyron-quote { font-style: italic; font-size: 1.05rem; line-height: 1.6; }
.tyron-story p { line-height: 1.6; margin: .6rem 0; }

.bico { width: 1.7rem; height: 1.7rem; flex: none; filter: drop-shadow(0 1px 2px #000a); }
.badge .bico { margin-right: .1rem; }
.badge.locked .bico { filter: grayscale(1) opacity(.5); }
.help-badge { display: inline-block; }

.you-av { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: none; max-width: 120px; }
.you-roles { display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.you-roles .chip { font-size: .72rem; padding: .05rem .4rem; }

/* Lager-Popup: Aktionsliste */
.cm-acts { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.cm-act { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #0003; flex-wrap: wrap; }
.cm-act .cm-at { flex: 1; min-width: 180px; display: grid; }
.cm-act .cm-at small { color: var(--muted); }
.cm-note { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.cm-note input { min-width: 160px; }

/* Hinweise (ⓘ): leuchtendes Symbol, deutlich abgesetzt */
.tipbox summary .hi { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-right: .25rem; border-radius: 50%; background: var(--gold, #d9b45a); color: #1b140a; font-weight: 700; font-style: normal; box-shadow: 0 0 8px #ffd75ecc, 0 0 2px #fff8; animation: hintglow 2.4s ease-in-out infinite; }
.tipbox summary { border-color: var(--gold, #d9b45a); color: var(--gold-hi, #f3e2b0); background: #d9b45a14; }
.tipbox[open] > summary { background: #d9b45a26; }
.tipbox.hint .hint-body { border-left: 3px solid var(--gold, #d9b45a); padding-left: .6rem; margin-top: .3rem; background: #d9b45a0d; border-radius: 0 6px 6px 0; }
@keyframes hintglow { 50% { box-shadow: 0 0 12px #ffd75e, 0 0 3px #fff; } }

/* Quest-Brett: Karten dürfen schrumpfen, am Handy untereinander */
.quest > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.quest > div:last-child { flex: none; }
.quest .rewards { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
@media (max-width: 640px) {
  .quest { flex-direction: column; gap: .5rem; }
  .quest > div:last-child { align-self: flex-start; }
}

/* Ritualkreis */
.ritual-card { border: 1px solid #b57cff66; border-radius: var(--radius); padding: .7rem .9rem; margin: .6rem 0; background: linear-gradient(180deg, #2a1a4a33, #0004); box-shadow: 0 0 14px #b57cff22; }
.place.open .rune circle:first-child { filter: drop-shadow(0 0 4px #b57cff); }
.row-btns.tabs-line .btn.on { border-color: var(--gold); color: var(--gold-hi); background: #d9b45a22; }

.place.legendary .place-ring { stroke: #ffd75e; stroke-width: 3; filter: url(#glow); animation: pulse 1.3s infinite; }
.rit-aura { fill: #b57cff; opacity: .22; stroke: #ffd75e; stroke-width: 1.5; animation: pulse 1.6s infinite; pointer-events: none; }
.battle-alert.legend { background: linear-gradient(90deg, #3a1a5a, #5a2a10); border-color: #ffd75e; color: #fff0c4; }
.rit-log { list-style: none; margin: .3rem 0 .8rem; padding: 0; max-height: 14rem; overflow-y: auto; border-left: 2px solid #5a3a8a; }
.rit-log li { padding: .15rem .6rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.battle-alert.ritual-own { background: linear-gradient(90deg, #2a1a4a, #3a2a1a); border-color: #b57cff; color: #efe4ff; }
.battle-alert.finale-alert { background: linear-gradient(90deg, #4a1208, #3a2410); border-color: #ff7a3a; color: #ffe2cf; font-size: 1.05rem; }
.rit-scene-wrap { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: .6rem 0; }
.rit-scene { width: min(300px, 100%); height: auto; flex: 0 0 auto; }
.rit-who { flex: 1 1 200px; min-width: 0; }
.rit-who p { margin: .2rem 0; }
.chat-box { list-style: none; margin: .4rem 0; padding: .3rem .5rem; max-height: 18rem; overflow-y: auto; background: #00000040; border: 1px solid var(--line, #3a2e1e); border-radius: 6px; }
.chat-box li { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; }
.chat-box li.mine .c-txt { color: var(--gold, #d9b45a); }
.chat-box .c-txt { overflow-wrap: anywhere; }
.chat-box .c-meta { font-size: .85em; }

/* Lagerwahl: die kleinsten Lager leuchten (doppelte XP) */
@keyframes glowpulse { 0%, 100% { box-shadow: 0 0 6px 1px rgba(255, 210, 90, .55); } 50% { box-shadow: 0 0 16px 4px rgba(255, 210, 90, .95); } }
.btn.glow, button.glow { animation: glowpulse 1.6s ease-in-out infinite; border-color: #ffd25a; }
.xp-bonus-note { color: var(--gold); margin: .4rem 0; }

.riika-panel { border-left: 3px solid var(--gold, #d9b45a); }
.riika-quote { margin: .4rem 0; padding: 0 .2rem; font-style: italic; font-size: 1.05em; }
.watch.on { display: block; } .watch .watch-txt { display: block; line-height: 1.4; }
.quest.guild { border-color: #e0b84a; box-shadow: 0 0 10px #e0b84a33; }
.q-odds { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .15rem; font-size: .85rem; }
.q-odds li { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: baseline; }
.q-odds li small { grid-column: 1 / -1; color: var(--muted); }
.q-odds .q-full b { color: var(--gold, #d9b45a); } .q-odds .q-ok b { color: var(--good); } .q-odds .q-fail b { color: var(--bad, #d06a5a); }

/* ---------- Handy: schlanke, feste Kopfzeile (Logo · Online · Spielmenü / Werte / Phase · Hilfe / Menü) ---------- */
.stickyhead { display: contents; }
.u-menu, .user-pop-name { display: none; }
@media (max-width: 640px) {
  .stickyhead { display: block; position: sticky; top: 0; z-index: 45; background: #0b0805; }
  .pz .stickyhead { position: static; }
  .stickyhead .topbar { position: static; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand online menu" "wallet wallet wallet" "clock clock clock" "sleep sleep sleep"; gap: 0 .5rem; padding: .3rem .6rem .2rem; align-items: center; backdrop-filter: none; }
  .stickyhead .brand { grid-area: brand; } .stickyhead .brand img { height: 28px; }
  .stickyhead .online-count { grid-area: online; justify-self: start; font-size: .7rem; white-space: nowrap; opacity: .85; }
  .stickyhead .usermenu { grid-area: menu; }
  .stickyhead #user-btn { padding: .25rem .6rem; } .stickyhead #user-btn .u-name { display: none; } .stickyhead #user-btn .u-menu { display: inline; }
  .stickyhead .user-pop { right: 0; min-width: 210px; } .stickyhead .user-pop-name { display: block; font-family: var(--font-head); color: var(--gold-hi); padding: .1rem .2rem .3rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .stickyhead .wallet { grid-area: wallet; display: flex; justify-content: space-between; gap: .3rem; font-size: .8rem; margin: .25rem 0 0; }
  .stickyhead .wallet span { padding: .1rem .45rem; }
  .stickyhead .clock { grid-area: clock; order: 0; min-width: 0; text-align: left; font-size: .72rem; margin: .2rem 0 0; }
  .stickyhead .clock .phase { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
  .stickyhead .clock .ph-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stickyhead .clock .hd-date, .stickyhead .clock .hd-lbl { display: none; }
  .stickyhead .clock .help-btn { transform: none; flex: none; margin-left: auto; }
  .stickyhead .clock .small { display: block; font-size: .66rem; }
  .stickyhead .sleep-chip { grid-area: sleep; font-size: .72rem; margin-top: .2rem; }
  .stickyhead .nav { padding: 0 .3rem; border-bottom: 1px solid var(--gold-lo); justify-content: space-between; }
  .stickyhead .nav a { padding: .5rem .55rem; }
}
@media (max-width: 640px) {
  .stickyhead .topbar { grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; }
  .stickyhead .wallet { min-width: 0; gap: .2rem; font-size: .74rem; } .stickyhead .wallet span { padding: .1rem .35rem; gap: .2rem; min-width: 0; } .stickyhead .wallet .ic { width: 1rem; height: 1rem; }
  .stickyhead .online-count { padding: .1rem .4rem; min-width: 0; overflow: hidden; }
  .stickyhead #user-btn { padding: .2rem .5rem; font-size: .8rem; gap: .25rem; }
  .stickyhead .brand { gap: .3rem; }
}

/* Grund-Hinweis „!“ neben gesperrten Buttons (nur Touch-Geräte; am PC reicht der Tooltip) */
.why-i { display: none; }
@media (hover: none), (pointer: coarse) {
  .why-i { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin-left: .3rem; border-radius: 50%; background: #c9822a; color: #fff; font-weight: 700; font-size: .85rem; line-height: 1; vertical-align: middle; cursor: pointer; flex: 0 0 auto; }
}

/* Geheimes Affenlager */
.camp-card.monkey { border-style: dashed; }
.camp-card.monkey h3 .chip { font-size: .7rem; vertical-align: middle; }
.monkey-panel { border-left: 4px solid #8b5a2b; }