/* ==========================================================================
   Heldenbuch – Pergament, Gold und dunkles Holz
   ========================================================================== */

@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("fonts/cinzel-decorative-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #140d08;
  --wood: #24170f;
  --wood-2: #33220f;
  --leather: #3d2715;
  --gold: #c9a227;
  --gold-light: #ecd27e;
  --gold-dark: #8a6a1c;
  --parchment: #ecdcb4;
  --parchment-light: #f7ecd0;
  --parchment-dark: #d4bb85;
  --ink: #2b1c0f;
  --ink-soft: #5e4529;
  --line: rgba(110, 78, 38, .35);
  --blood: #7e1a14;
  --blood-light: #a8322a;
  --life: #b3241c;
  --mana: #2c5bb0;
  --karma: #c99a1e;
  --forest: #2e6334;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --heading: "Cinzel", Georgia, serif;
  --body: "EB Garamond", Garamond, "Palatino Linotype", Georgia, serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%239a7428' stroke-width='1.5'%3E%3Cpath d='M2 42V10a8 8 0 0 1 8-8h32'/%3E%3Cpath d='M7 33V14a7 7 0 0 1 7-7h19'/%3E%3C/g%3E%3Cg fill='%239a7428'%3E%3Cpath d='M13 13c6 0 8 3 8 8-5 0-8-3-8-8z'/%3E%3Ccircle cx='7' cy='38' r='1.8'/%3E%3Ccircle cx='38' cy='7' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cpath d='M0 6h98M122 6h98' stroke='%23a07a2c' stroke-width='1'/%3E%3Cpath d='M110 1l6 5-6 5-6-5z' fill='%237e1a14'/%3E%3Ccircle cx='100' cy='6' r='1.6' fill='%23a07a2c'/%3E%3Ccircle cx='120' cy='6' r='1.6' fill='%23a07a2c'/%3E%3C/svg%3E");
  --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 18px/1.5 var(--body);
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(201, 162, 39, .18), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(126, 26, 20, .25), transparent 60%),
    var(--noise),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wood) 0%, var(--night) 100%);
}

::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3 { font-family: var(--heading); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.2rem; color: var(--blood); }
h3 { font-size: 1rem; color: var(--ink-soft); }
p { margin: 0 0 .8em; }
a { color: var(--blood); text-decoration-color: rgba(126, 26, 20, .4); text-underline-offset: 3px; }
a:hover { color: var(--blood-light); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background:
    var(--noise),
    linear-gradient(180deg, #3a2614 0%, #24170c 100%);
  border-bottom: 3px double var(--gold-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.topbar-row {
  max-width: 1200px; margin: 0 auto; padding: .55rem 1rem .2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 900; font-size: 1.55rem; letter-spacing: .04em;
  text-decoration: none;
  background: linear-gradient(180deg, #f6e3a1 0%, #d4ad3a 55%, #9b7520 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.brand-mark {
  width: 30px; height: 35px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M10 8H90V55C90 86 70 103 50 113C30 103 10 86 10 55Z' fill='%238e1b18' stroke='%23c9a227' stroke-width='6'/%3E%3Cpath d='M32 30l36 48M68 30L32 78' stroke='%23ecd27e' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.userbox { display: flex; align-items: center; gap: .3rem; color: var(--parchment-dark); }
.userbox .who { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--heading); font-size: .85rem; margin-right: .3rem; }
.userbox a, .userbox button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--gold-light); background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 39, .35);
  cursor: pointer; font: inherit;
}
.userbox a:hover, .userbox button:hover, .userbox a.active { background: rgba(201, 162, 39, .2); border-color: var(--gold); }
.userbox a.gm-link {
  width: auto; gap: .4rem; padding: 0 .85rem; border-radius: 99px; text-decoration: none;
  font-family: var(--heading); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.userbox a.gm-link.active { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.userbox a.gm-link + .who { margin-left: .4rem; }

.mainnav {
  max-width: 1200px; margin: 0 auto; padding: .3rem 1rem 0;
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .5rem .5rem .55rem;
  font-family: var(--heading); font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--parchment-dark); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.mainnav a:hover { color: var(--gold-light); background: rgba(201, 162, 39, .08); }
.mainnav a.active {
  color: var(--blood);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border-color: var(--gold-dark);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .3);
  margin-bottom: -3px; padding-bottom: calc(.55rem + 3px);
}

/* --------------------------------------------------------------------------
   Seitenaufbau
   -------------------------------------------------------------------------- */

main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }

.site-footer {
  text-align: center; padding: 1.2rem 1rem 2rem;
  font-family: var(--heading); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(236, 210, 126, .45);
}

.page-title, .hero-banner, .clan-banner {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; padding: 0 .2rem;
  color: var(--parchment-light);
}
.page-title h1, .hero-banner h1, .clan-banner h1 {
  margin: 0; font-family: var(--display); font-size: 2.2rem;
  background: linear-gradient(180deg, #f8e7ab, #d1a838 60%, #a27a22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.page-title > div:first-child, .hero-banner .banner-text { flex: 1 1 300px; }
.page-title .sub, .hero-banner .sub, .clan-banner .sub {
  margin: .25rem 0 0; color: var(--parchment-dark); font-style: italic; font-size: 1.05rem;
}
.page-title-extra, .banner-extra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hero-banner .clan-line { margin: .15rem 0 0; color: var(--gold-light); font-family: var(--heading); font-size: .85rem; letter-spacing: .05em; }
.banner-emblem { display: inline-flex; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.clan-banner .emblem { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.clan-banner .motto { margin: .3rem 0 0; color: var(--gold-light); font-style: italic; font-size: 1.15rem; }
.back { display: inline-block; margin-bottom: .9rem; color: var(--gold-light); font-family: var(--heading); font-size: .85rem; letter-spacing: .05em; text-decoration: none; }
.back:hover { color: #fff3c4; }
.narrow-page { max-width: 560px; margin: 0 auto; }

.grid { display: grid; gap: 1.2rem; align-items: start; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-battle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) { .grid-battle { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pergamentkarten
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  margin-bottom: 1.2rem; padding: 1.5rem 1.6rem 1.4rem;
  min-width: 0;
  background:
    var(--noise),
    radial-gradient(ellipse at 50% 40%, var(--parchment-light) 0%, var(--parchment) 55%, var(--parchment-dark) 100%);
  border: 1px solid #7a5a26;
  border-radius: 4px;
  box-shadow: inset 0 0 45px rgba(110, 70, 20, .35), inset 0 0 0 5px rgba(247, 236, 208, .35), var(--shadow);
}
.card::before, .card::after {
  content: ""; position: absolute; width: 38px; height: 38px; pointer-events: none;
  background: var(--corner) center / contain no-repeat;
}
.card::before { top: 6px; left: 6px; }
.card::after { bottom: 6px; right: 6px; transform: rotate(180deg); }
.card > h2, .card summary h2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  margin-bottom: .9rem; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
}
.card > h2::after, .card summary h2::after {
  content: ""; width: 180px; max-width: 100%; height: 12px; background: var(--divider) left center / contain no-repeat;
}
.card .sub { color: var(--ink-soft); font-style: italic; margin-top: -.5rem; }
.card h3 { margin-top: 1.1rem; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; }
.card hr { border: 0; height: 12px; margin: 1.2rem 0; background: var(--divider) center / 220px 12px no-repeat; }

details.collapsible summary { list-style: none; cursor: pointer; }
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary h2 { margin-bottom: 0; }
details.collapsible[open] summary h2 { margin-bottom: .9rem; }
details.collapsible .toggle-hint { display: block; margin-top: -.2rem; font-style: italic; color: var(--ink-soft); }
details.collapsible .toggle-hint::after { content: " ▾"; font-style: normal; }
details.collapsible[open] .toggle-hint { display: none; }

/* Schaltflächen auf dunklem Grund (Seitenkopf) */
.page-title .btn.secondary, .hero-banner .btn.secondary, .clan-banner .btn.secondary,
.page-title .btn.danger, .hero-banner .btn.danger, .clan-banner .btn.danger {
  color: var(--gold-light); background: rgba(0, 0, 0, .35); border-color: var(--gold-dark); box-shadow: none;
}
.page-title .btn.danger:hover, .hero-banner .btn.danger:hover, .clan-banner .btn.danger:hover { color: #fbe9c4; background: var(--blood); }

/* --------------------------------------------------------------------------
   Formulare & Schaltflächen
   -------------------------------------------------------------------------- */

label > span, .field > label > span, legend {
  display: block; margin-bottom: .2rem;
  font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .45); border-bottom: 2px solid rgba(110, 78, 38, .6);
  border-radius: 3px; padding: .42rem .6rem;
  box-shadow: inset 0 1px 3px rgba(80, 50, 15, .15);
}
input::placeholder, textarea::placeholder { color: rgba(94, 69, 41, .55); font-style: italic; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201, 162, 39, .35); background: rgba(255, 250, 235, .85); }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--blood); }
input.mini { width: 4.6rem; padding: .25rem .4rem; text-align: center; }
fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.field { margin-bottom: .8rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .9rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.hint { font-size: .95rem; color: var(--ink-soft); font-style: italic; }
.error { color: var(--blood); font-weight: 600; margin: .6rem 0 0; }
.inline-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1rem; }
.inline-form .field { margin: 0; flex: 1 1 160px; }
.inline-form .field.narrow { flex: 0 0 96px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem 1.05rem;
  font-family: var(--heading); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  color: #f8e7b6;
  background: linear-gradient(180deg, #a8322a 0%, #7e1a14 55%, #5f120d 100%);
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 0 #2d0a07, 0 3px 8px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.12); color: #fff4cf; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.btn.secondary {
  color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, rgba(255, 248, 225, .7), rgba(220, 196, 140, .7));
  border-color: #8a6a3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(90, 60, 20, .45);
}
.btn.secondary:hover { color: var(--blood); }
.btn.danger {
  color: var(--blood); text-shadow: none;
  background: rgba(255, 248, 225, .45);
  border-color: rgba(126, 26, 20, .6);
  box-shadow: 0 2px 0 rgba(126, 26, 20, .25);
}
.btn.danger:hover { background: var(--blood); color: #f8e7b6; }
.btn.small { padding: .28rem .65rem; font-size: .7rem; }
.btn.tiny { padding: .12rem .45rem; font-size: .66rem; letter-spacing: .04em; }
.btn.big { padding: .7rem 1.8rem; font-size: .95rem; }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.actions.center { justify-content: center; }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.tabs a {
  padding: .4rem .95rem; border-radius: 99px;
  font-family: var(--heading); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--parchment-dark);
  border: 1px solid rgba(201, 162, 39, .35); background: rgba(0, 0, 0, .25);
}
.tabs a:hover { color: var(--gold-light); border-color: var(--gold); }
.tabs a.active { color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-light); }
.card .tabs a { color: var(--ink-soft); background: rgba(255, 248, 225, .4); border-color: rgba(110, 78, 38, .35); }
.card .tabs a.active { color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: var(--gold); }
.tabs.center { justify-content: center; }

.tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .05rem .5rem; border-radius: 3px;
  font-family: var(--heading); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .35);
  white-space: nowrap; vertical-align: .1em;
}
.tag.gold { color: #4a3505; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-dark); }
.tag.blood { color: #fbe9c4; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: #5f120d; }
.tag.equipped { color: #f2f6e9; background: var(--forest); border-color: #1f4423; }
.tag.big { font-size: .8rem; padding: .25rem .7rem; }
.page-title .tag:not(.gold):not(.blood), .hero-banner .tag:not(.gold):not(.blood) { color: var(--parchment-light); background: rgba(0, 0, 0, .35); border-color: rgba(201, 162, 39, .4); }

.empty { color: var(--ink-soft); font-style: italic; margin: .3rem 0; }
.desc { color: var(--ink-soft); font-size: .93rem; line-height: 1.35; }
.note { font-style: italic; }
.stats-line { font-family: var(--heading); font-size: .75rem; letter-spacing: .04em; color: var(--blood); }
.flavor { font-style: italic; color: var(--ink-soft); border-left: 3px solid rgba(126, 26, 20, .4); padding-left: .8rem; }
.prose { white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   Heldenbogen
   -------------------------------------------------------------------------- */

.attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem .55rem; }
.attr {
  display: block; padding: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.attr-inner {
  text-align: center; padding: .45rem .3rem 1.05rem;
  background: var(--noise), linear-gradient(180deg, #8e1f18, #5a100b);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  color: #f8e7b6;
}
.attr .k { font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--gold-light); }
.attr .v { font-family: var(--heading); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.attr input { width: 100%; max-width: 4rem; margin: .1rem auto 0; display: block; text-align: center; font-family: var(--heading); font-size: 1.15rem; font-weight: 700; padding: .1rem; }

.vial { margin-bottom: .75rem; }
.vial-head { display: flex; justify-content: space-between; font-family: var(--heading); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.vial-head strong { color: var(--ink); }
.vial-track {
  position: relative; height: 16px; margin-top: .2rem; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, #1c130b, #3a2a18);
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 245, 210, .6);
}
.vial-track::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1));
}
.vial-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.vial.lep .vial-fill { background: linear-gradient(180deg, #e2564a, var(--life) 50%, #6e0f0a); box-shadow: 0 0 10px rgba(226, 86, 74, .6); }
.vial.asp .vial-fill { background: linear-gradient(180deg, #6f9df0, var(--mana) 50%, #172f61); box-shadow: 0 0 10px rgba(111, 157, 240, .6); }
.vial.kap .vial-fill { background: linear-gradient(180deg, #f2d26a, var(--karma) 50%, #6e520c); box-shadow: 0 0 10px rgba(242, 210, 106, .6); }

.stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: .9rem 0 .6rem; }
.stat .k { font-family: var(--heading); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stat .v { font-family: var(--heading); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.purse {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; border-top: 1px dashed var(--line);
  font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.purse .coins { font-size: 1.25rem; text-transform: none; letter-spacing: .02em; }
.coins { display: inline-flex; align-items: center; font-family: var(--heading); font-weight: 700; white-space: nowrap; color: #6a4c0c; }
.coin-dot {
  display: inline-block; width: .9em; height: .9em; margin-right: .3em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #d4ad3a 55%, #7d5c12);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 10, .55), 0 1px 1px rgba(0, 0, 0, .25);
}

.ability-group { margin-bottom: .9rem; }
.ability-group h3 { margin: 0 0 .25rem; }
.ability { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .32rem 0; border-bottom: 1px dashed var(--line); }
.ability .name { font-weight: 600; font-size: 1.05rem; }
.ability .probe { margin-left: .5rem; font-family: var(--heading); font-size: .68rem; letter-spacing: .06em; color: var(--ink-soft); }
.ability .val {
  min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: #f8e7b6;
  background: radial-gradient(circle at 35% 30%, #b0392f, #6a130d); border: 1px solid var(--gold); border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.ability .val:empty { display: none; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px dashed var(--line); vertical-align: top; }
th { font-family: var(--heading); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid rgba(110, 78, 38, .55); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, table.inv tr.equipped td { background: rgba(255, 248, 225, .35); }

/* Chronik & Listen */
.log { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.log li { padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.log time { display: block; font-family: var(--heading); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Anmeldung
   -------------------------------------------------------------------------- */

body.gate-page .topbar { display: none; }
/* Landschaft hinter der Anmeldung; main bildet den Stapelkontext, damit der Seitenhintergrund sie nicht verdeckt. */
body.gate-page main { position: relative; z-index: 1; }
body.gate-page .site-footer { position: relative; z-index: 2; color: rgba(255, 226, 160, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.gate-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Hochformat: Burg und Mond oben sichtbar, Anmeldefenster darunter */
@media (max-aspect-ratio: 4/5) {
  body.gate-page .gate { margin-top: 34vh; }
  body.gate-page .gate-crest { margin-bottom: -40px; }
  body.gate-page .gate-crest svg { width: 84px; height: auto; }
  body.gate-page .gate .card { padding-top: 3rem; }
}
.gate { position: relative; }
.gate .card { box-shadow: inset 0 0 45px rgba(110, 70, 20, .35), inset 0 0 0 5px rgba(247, 236, 208, .35), 0 0 0 1px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .7); }
.gate-crest { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8)) drop-shadow(0 0 22px rgba(255, 190, 90, .25)); }

@keyframes window-glow { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 55% { opacity: .95; } 70% { opacity: .6; } }
@keyframes firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(24px, -40px); opacity: .4; }
  80% { opacity: 1; }
  100% { transform: translate(-16px, -80px); opacity: 0; }
}
@keyframes shimmer { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: .9; transform: translateX(14px); } }
.gate-scene .twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.gate-scene .shooting { animation: shooting 11s linear infinite; }
.gate-scene .cloud { animation: cloud 26s ease-in-out infinite alternate; }
.gate-scene .cloud-slow { animation-duration: 40s; animation-direction: alternate-reverse; }
.gate-scene .fog { animation: drift 18s ease-in-out infinite alternate; }
.gate-scene .fog-slow { animation-duration: 26s; animation-direction: alternate-reverse; }
.gate-scene .birds { animation: glide 16s ease-in-out infinite alternate; }
.gate-scene .window { animation: window-glow 4s ease-in-out infinite; }
.gate-scene .firefly { animation: firefly 8s ease-in-out infinite; filter: drop-shadow(0 0 4px #ffd75a); }
.gate-scene .shimmer { animation: shimmer 6s ease-in-out infinite; }
.gate-scene .castle-flag { transform-box: fill-box; transform-origin: 0 50%; animation: wave 2.4s ease-in-out infinite; }
.gate { max-width: 460px; margin: 4vh auto 0; text-align: center; }
.gate-crest { position: relative; z-index: 2; margin-bottom: -48px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.gate .card { padding-top: 3.6rem; text-align: left; }
.gate-title {
  text-align: center; font-family: var(--display); font-weight: 900; font-size: 2.4rem; margin-bottom: .2rem;
  background: linear-gradient(180deg, #a8322a, #5f120d); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gate-sub { text-align: center; font-style: italic; color: var(--ink-soft); margin-bottom: 1.2rem; }

/* --------------------------------------------------------------------------
   Kampflog
   -------------------------------------------------------------------------- */

.battles { display: grid; gap: .9rem; }
.battle {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.2rem; border-radius: 4px; text-decoration: none; color: var(--ink);
  background: var(--noise), linear-gradient(90deg, var(--parchment-light), var(--parchment));
  border: 1px solid #7a5a26; box-shadow: inset 0 0 30px rgba(110, 70, 20, .3), var(--shadow);
  transition: transform .12s ease;
}
.battle:hover { transform: translateY(-2px); color: var(--ink); }
.battle.active { border-left: 6px solid var(--blood); }
.battle.finished { opacity: .85; }
.battle-icon {
  width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #a8322a, #4d0d09); border: 2px solid var(--gold); border-radius: 50%;
}
.battle.finished .battle-icon { background: radial-gradient(circle at 35% 30%, #6b5a45, #2e2418); }
.battle-title { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-family: var(--heading); font-weight: 700; font-size: 1.15rem; }
.battle-sides { margin: .15rem 0; }
.side-heroes { font-weight: 600; color: var(--forest); }
.side-foes { font-weight: 600; color: var(--blood); }
.versus { margin: 0 .5rem; font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.round-badge {
  font-family: var(--heading); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem;
  color: var(--ink); padding: .35rem .9rem; border-radius: 99px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark);
}
.fighters { display: grid; gap: .55rem; }
.fighter { padding: .45rem .55rem .1rem; border-radius: 4px; background: rgba(255, 248, 225, .35); border: 1px solid rgba(110, 78, 38, .2); }
.fighter.down { opacity: .6; filter: grayscale(.6); }
.fighter-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.fighter-head .btn { margin-left: auto; }
.ini {
  min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: .85rem; color: var(--ink);
  position: relative; z-index: 0;
}
.ini::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; transform: rotate(45deg);
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark); border-radius: 3px;
}
.fighter .vial { margin-bottom: .35rem; }

.quick-dice { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.die-btn {
  font-family: var(--heading); font-weight: 700; font-size: .8rem; cursor: pointer;
  padding: .35rem .6rem; color: var(--ink); background: #fbf3dd; border: 1px solid #8a6a3a; border-radius: 6px;
  box-shadow: 0 2px 0 #8a6a3a;
}
.die-btn:hover { background: var(--gold-light); }
.die-btn:active { transform: translateY(2px); box-shadow: none; }

.battle-log { max-height: 640px; overflow-y: auto; padding-right: .3rem; }
.round-title {
  display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .5rem;
  font-size: .8rem; letter-spacing: .14em; color: var(--blood);
}
.round-title::before, .round-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(126, 26, 20, .5), transparent); }
.entries { list-style: none; margin: 0 0 .6rem; padding: 0; }
.entry { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.entry-icon {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-soft); background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .35);
}
.entry.damage .entry-icon { color: #fbe9c4; background: var(--blood); border-color: #4d0d09; }
.entry.heal .entry-icon { color: #f2f6e9; background: var(--forest); border-color: #1f4423; }
.entry.roll .entry-icon { color: var(--ink); background: #fbf3dd; }
.entry-body { flex: 1; padding-top: .15rem; }
.entry.system { justify-content: center; font-family: var(--heading); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.dmg { color: var(--blood); }
.heal { color: var(--forest); }
.dice-row { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.die {
  min-width: 1.75rem; height: 1.75rem; padding: 0 .2rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; font-size: .9rem; color: var(--ink);
  background: linear-gradient(145deg, #fffaf0, #e6d4a8); border: 1px solid #8a6a3a; border-radius: 5px;
  box-shadow: 0 2px 0 #8a6a3a;
}
.die.crit { color: #4a3505; background: linear-gradient(145deg, #fff1b8, var(--gold)); border-color: var(--gold-dark); box-shadow: 0 0 8px rgba(201, 162, 39, .8), 0 2px 0 var(--gold-dark); }
.die.fumble { color: #fbe9c4; background: linear-gradient(145deg, #c2463c, #6a130d); border-color: #4d0d09; box-shadow: 0 2px 0 #4d0d09; }
.dice-row .mod, .dice-row .total { font-family: var(--heading); font-weight: 700; }

/* --------------------------------------------------------------------------
   Markt
   -------------------------------------------------------------------------- */

.wallet {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem; border-radius: 99px;
  color: var(--parchment-light); font-family: var(--heading); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--gold-dark);
}
.wallet .icon { color: var(--gold-light); font-size: 1.3rem; }
.wallet .coins { color: var(--gold-light); font-size: 1rem; text-transform: none; }

.wares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; }
.ware {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .9rem 1rem; border-radius: 4px;
  background: rgba(255, 250, 235, .5); border: 1px solid rgba(110, 78, 38, .35);
  box-shadow: 0 2px 0 rgba(110, 78, 38, .25);
}
.ware.mine { border-style: dashed; }
.ware header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ware h3 { margin: 0; font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.ware .desc { margin: 0; }
.ware-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); font-style: italic; }
.ware footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }
.price .coins { font-size: 1.05rem; }
.price small { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Ranglisten
   -------------------------------------------------------------------------- */

.board { display: flex; flex-direction: column; }
.podium, .rest, .clan-ranking { list-style: none; margin: 0; padding: 0; }
.place {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; margin-bottom: .45rem; border-radius: 4px;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .25);
}
.place.me, .rest li.me { outline: 2px solid var(--gold); }
.place .who { flex: 1; min-width: 0; }
.place .who strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.place .who small { display: block; color: var(--ink-soft); font-size: .82rem; }
.value { font-family: var(--heading); font-weight: 700; white-space: nowrap; }
.medal {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--heading); font-weight: 700; color: var(--ink);
  border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25);
  background: radial-gradient(circle at 35% 30%, #efe4cf, #a89a85);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 2px 3px rgba(0, 0, 0, .3);
}
.gold .medal, .medal.gold { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }
.silver .medal, .medal.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #b8bec7 60%, #6d747e); }
.bronze .medal, .medal.bronze { background: radial-gradient(circle at 35% 30%, #f5c9a0, #b06b32 60%, #6a3a14); }
.place.gold { background: linear-gradient(90deg, rgba(236, 210, 126, .55), rgba(255, 250, 235, .4)); }
.rest { counter-reset: rank 3; }
.rest li { counter-increment: rank; display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .6rem; border-bottom: 1px dashed var(--line); }
.rest li::before { content: counter(rank) "."; width: 1.8rem; font-family: var(--heading); color: var(--ink-soft); }
.rest li span:first-of-type { flex: 1; }
.clan-ranking li { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.clan-ranking a { flex: 1; }
.clan-ranking small { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Clans
   -------------------------------------------------------------------------- */

.clan-list { list-style: none; margin: 0; padding: 0; }
.clan-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.clan-link { flex: 1; display: flex; gap: .8rem; align-items: center; color: var(--ink); text-decoration: none; }
.clan-link:hover strong { color: var(--blood); }
.clan-link strong { font-family: var(--heading); font-size: 1.05rem; }
.motto { font-style: italic; }
.motto.small { font-size: .95rem; color: var(--ink-soft); }

.clan-form-grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.emblem-preview { width: 96px; display: flex; justify-content: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.picker legend { width: 100%; }
.pick { position: relative; cursor: pointer; display: inline-flex; padding: .25rem; border-radius: 6px; border: 2px solid transparent; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--blood); background: rgba(255, 250, 235, .6); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold); }
.swatch span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }

.members { list-style: none; margin: 0; padding: 0; }
.member { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.member.rank-leader strong { color: var(--blood); }
.posts { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 520px; overflow-y: auto; }
.posts li {
  position: relative; padding: .7rem .9rem; margin-bottom: .6rem;
  background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); border-radius: 3px;
  box-shadow: 1px 2px 0 rgba(110, 78, 38, .2);
}
.posts li::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c2463c, #5f120d); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.posts p { margin: .2rem 0 0; }
.post-head { display: flex; justify-content: space-between; gap: .5rem; }
.post-head time { font-family: var(--heading); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Inventar: Ausrüstungsfigur & Gepäck
   -------------------------------------------------------------------------- */

.paperdoll {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr);
  grid-template-areas: "left center right" "bottom bottom bottom";
  gap: 1rem 1.4rem; align-items: start;
}
.doll-col { display: grid; gap: .6rem; }
.doll-col:first-child { grid-area: left; }
.doll-col:nth-child(3) { grid-area: right; }
.doll-center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding-top: .4rem; }
.doll-figure { width: 100%; max-width: 220px; height: auto; filter: drop-shadow(0 6px 10px rgba(60, 35, 10, .35)); }
.doll-name { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--blood); text-align: center; }
.doll-stats { display: flex; gap: .5rem; }
.doll-stats div {
  min-width: 64px; padding: .35rem .5rem; text-align: center; border-radius: 4px;
  background: linear-gradient(180deg, #8e1f18, #5a100b); border: 1px solid var(--gold); color: #f8e7b6;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.doll-stats b { display: block; font-family: var(--heading); font-size: 1.15rem; line-height: 1.1; }
.doll-stats small { font-family: var(--heading); font-size: .62rem; letter-spacing: .12em; color: var(--gold-light); }
.doll-bottom { grid-area: bottom; display: grid; grid-template-columns: 2fr 3fr; gap: 1.4rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.doll-group h3 { margin: 0 0 .45rem; }
.doll-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }

.slot {
  position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: .55rem;
  align-items: center; min-height: 58px; padding: .45rem .6rem; border-radius: 5px;
  text-decoration: none; color: var(--ink);
}
.slot .slot-icon {
  grid-row: 1 / span 3; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 1.35rem;
}
.slot-label { font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.slot-item { font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.slot-stats { font-family: var(--heading); font-size: .66rem; letter-spacing: .04em; color: var(--blood); }
.slot.empty { background: rgba(110, 78, 38, .08); border: 1px dashed rgba(110, 78, 38, .45); }
.slot.empty .slot-icon { color: rgba(94, 69, 41, .45); background: rgba(110, 78, 38, .08); }
.slot.empty .slot-item { font-weight: 400; font-style: italic; color: rgba(94, 69, 41, .6); }
.slot.empty:hover { background: rgba(201, 162, 39, .15); border-color: var(--gold-dark); }
.slot.filled {
  padding-right: 1.9rem;
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .85));
  border: 1px solid var(--gold-dark); box-shadow: 0 2px 0 rgba(110, 78, 38, .3), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.slot.filled .slot-icon { color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); border: 1px solid var(--gold); }
.slot-off {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  font-size: .7rem; line-height: 1; color: var(--blood); background: rgba(255, 248, 225, .8); border: 1px solid rgba(126, 26, 20, .4);
  opacity: .55; transition: opacity .15s ease;
}
.slot:hover .slot-off, .slot-off:focus-visible { opacity: 1; }
.slot-off:hover { background: var(--blood); color: #fbe9c4; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chips a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 99px;
  font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; background: rgba(255, 248, 225, .45); border: 1px solid rgba(110, 78, 38, .35);
}
.chips a small { font-family: var(--body); font-size: .8rem; letter-spacing: 0; padding: 0 .35rem; border-radius: 99px; background: rgba(110, 78, 38, .15); }
.chips a:hover { color: var(--blood); border-color: var(--gold-dark); }
.chips a.active { color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #7e1a14); border-color: var(--gold); }
.chips a.active small { background: rgba(0, 0, 0, .25); }

.bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: .9rem; }
.bag-item {
  display: flex; flex-direction: column; gap: .3rem; padding: .85rem .95rem; border-radius: 5px;
  background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .35); box-shadow: 0 2px 0 rgba(110, 78, 38, .25);
}
.bag-item header { display: flex; gap: .65rem; align-items: flex-start; }
.bag-icon {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #4a3420, #1c120a); border: 1px solid var(--gold-dark); border-radius: 6px;
}
.bag-title { flex: 1; min-width: 0; }
.bag-title h3 { margin: 0 0 .2rem; font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.bag-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.qty { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--blood); }
.bag-item .desc { margin: 0; }
.bag-meta { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.bag-item footer { margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--line); }

.worn { list-style: none; margin: 0; padding: 0; }
.worn li { display: grid; grid-template-columns: 30px 88px 1fr; align-items: center; gap: .1rem .5rem; padding: .32rem 0; border-bottom: 1px dashed var(--line); }
.worn-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); }
.worn-slot { font-family: var(--heading); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.worn small { grid-column: 3; color: var(--blood); font-family: var(--heading); font-size: .66rem; }

@media (max-width: 860px) {
  .paperdoll { grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "left right" "bottom bottom"; }
}
@media (max-width: 600px) {
  .paperdoll { grid-template-columns: 1fr; grid-template-areas: "center" "left" "right" "bottom"; gap: .6rem; }
  .doll-row { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .doll-figure { max-width: 150px; }
  .doll-bottom { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Heldenbild, Proben, Steigern, Traglast
   -------------------------------------------------------------------------- */

.portrait {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, #5a3a22, #1c120a);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .45);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-initial { font-family: var(--display); font-weight: 900; color: var(--gold-light); line-height: 1; }
.portrait-sm { width: 28px; height: 28px; border-width: 1px; }
.portrait-sm .portrait-initial { font-size: .85rem; }
.portrait-md { width: 44px; height: 44px; }
.portrait-md .portrait-initial { font-size: 1.2rem; }
.portrait-lg { width: 92px; height: 92px; border-width: 3px; }
.portrait-lg .portrait-initial { font-size: 2.6rem; }
.portrait-xl { width: 160px; height: 160px; border-width: 4px; }
.portrait-xl .portrait-initial { font-size: 4rem; }
.portrait-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.portrait-edit {
  position: absolute; right: 2px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--ink); background: linear-gradient(180deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-dark);
}
.portrait-btn:hover .portrait { box-shadow: 0 0 0 3px var(--gold-light), 0 4px 14px rgba(0, 0, 0, .55); }
.portrait-preview { display: flex; justify-content: center; margin-bottom: 1rem; }
.hero-banner .titles { margin: .35rem 0 0; display: flex; gap: .35rem; flex-wrap: wrap; }

.attr-wrap { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
button.attr { border: 0; font: inherit; cursor: pointer; width: 100%; }
button.attr.rollable:hover { filter: drop-shadow(0 0 8px rgba(236, 210, 126, .8)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transform: translateY(-1px); }
.raise-btn {
  padding: .1rem .35rem; border-radius: 3px; cursor: pointer; white-space: nowrap;
  font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: var(--forest); background: rgba(255, 250, 235, .7); border: 1px solid rgba(46, 99, 52, .55);
}
.raise-btn:hover:not(:disabled) { color: #f2f6e9; background: var(--forest); }
.raise-btn:disabled { opacity: .45; cursor: default; color: var(--ink-soft); border-color: var(--line); }
.ability-name { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.dice-btn {
  width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border-radius: 6px; color: var(--ink); background: #fbf3dd; border: 1px solid #8a6a3a; box-shadow: 0 2px 0 #8a6a3a;
}
.dice-btn:hover { background: var(--gold-light); }
.dice-btn:active { transform: translateY(2px); box-shadow: none; }

.load { margin: .2rem 0 .6rem; }
.load-track { height: 8px; margin-top: .2rem; border-radius: 99px; overflow: hidden; background: rgba(110, 78, 38, .2); border: 1px solid rgba(110, 78, 38, .35); }
.load-fill { height: 100%; background: linear-gradient(90deg, #7a8a3a, #b0943a); }
.load.over .load-fill { background: linear-gradient(90deg, #b0943a, var(--blood)); }
.load-warning { margin: .35rem 0 0; color: var(--blood); font-weight: 600; font-size: .95rem; }
.load-banner {
  margin: -.6rem 0 1.2rem; padding: .6rem .9rem; border-radius: 4px; color: #fbe9c4;
  background: linear-gradient(180deg, rgba(168, 50, 42, .9), rgba(95, 18, 13, .9)); border: 1px solid var(--gold);
}
.wallet.overloaded { border-color: var(--blood-light); box-shadow: 0 0 12px rgba(200, 60, 40, .5); }
.tag.effect-lep { color: #fbe9c4; background: var(--life); border-color: #6e0f0a; }
.tag.effect-asp { color: #eaf0ff; background: var(--mana); border-color: #172f61; }
.tag.effect-kap { color: #3a2a05; background: var(--karma); border-color: #6e520c; }

/* Dialog */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: 8vh 1rem 2rem; background: rgba(10, 6, 3, .72); backdrop-filter: blur(2px);
}
.dialog { width: 100%; max-width: 520px; animation: fate-in .25s ease-out both; }
.dialog-close {
  position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgba(255, 250, 235, .6); border: 1px solid rgba(110, 78, 38, .4);
}
.probe-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); text-align: center; }
.probe-dice { display: flex; justify-content: center; gap: 1rem; }
.probe-die-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.probe-die-wrap small { font-family: var(--heading); font-size: .7rem; letter-spacing: .06em; color: var(--ink-soft); }
.die.big { min-width: 3rem; height: 3rem; font-size: 1.5rem; animation: die-roll .45s ease-out both; }
.die.over { background: linear-gradient(145deg, #f3d6c8, #d9a58f); }
@keyframes die-roll { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.probe-verdict { margin: .8rem 0 .2rem; font-family: var(--heading); font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; }
.probe-verdict.ok { color: var(--forest); }
.probe-verdict.fail { color: var(--blood); }

/* --------------------------------------------------------------------------
   Abenteuer: Aufträge & Termine
   -------------------------------------------------------------------------- */

.quests, .sessions { display: grid; gap: .9rem; }
.quest {
  padding: .9rem 1rem; border-radius: 5px; background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .35); border-left: 5px solid var(--gold-dark); box-shadow: 0 2px 0 rgba(110, 78, 38, .2);
}
.quest.done { border-left-color: var(--forest); opacity: .85; }
.quest.cancelled { border-left-color: var(--blood); opacity: .6; }
.quest header { display: flex; gap: .7rem; align-items: center; margin-bottom: .4rem; }
.quest header h3 { margin: 0 0 .15rem; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.05rem; }
.quest-seal {
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border-radius: 50%;
  color: #f8e7b6; background: radial-gradient(circle at 35% 30%, #b0392f, #5a100b); border: 1px solid var(--gold);
}
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0; }
.chips-label { font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.chip { padding: .1rem .55rem; border-radius: 99px; font-size: .88rem; font-weight: 600; background: rgba(212, 187, 133, .55); border: 1px solid rgba(110, 78, 38, .3); }
.chip.ap { color: var(--forest); }
.chip.gold { color: #6a4c0c; background: linear-gradient(180deg, #fff1b8, #ecd27e); }
.chip.season { color: #3b2a6e; }
.chip.guild { color: var(--mana); }
.chip.faction { color: var(--blood); }
.quest-heroes { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .4rem 0; }
.quest-hero { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; }
.with-portrait { display: inline-flex; align-items: center; gap: .5rem; }

.hero-picker { margin-bottom: 1rem; }
.hero-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem; margin-top: .5rem; }
.pick-hero {
  display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 5px; cursor: pointer;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .25);
}
.pick-hero:has(input:checked) { background: rgba(236, 210, 126, .55); border-color: var(--gold-dark); }

.calendar { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cal-head h3 { margin: 0; text-transform: capitalize; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-family: var(--heading); font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); padding-bottom: .2rem; }
.cal-day {
  min-height: 68px; padding: .2rem .25rem; border-radius: 4px; overflow: hidden;
  background: rgba(255, 250, 235, .45); border: 1px solid rgba(110, 78, 38, .18);
}
.cal-day.other { opacity: .45; }
.cal-day.today { border-color: var(--gold-dark); box-shadow: inset 0 0 0 1px var(--gold); }
.cal-day.has { background: rgba(236, 210, 126, .45); }
.cal-num { font-family: var(--heading); font-size: .78rem; font-weight: 700; }
.cal-event {
  display: block; width: 100%; margin-top: .15rem; padding: .05rem .25rem; border-radius: 3px; cursor: pointer; text-align: left;
  font: inherit; font-size: .72rem; line-height: 1.25; color: #f8e7b6; background: var(--blood); border: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event.cancelled { background: #6b6f76; text-decoration: line-through; }
.session { display: flex; gap: .9rem; padding: .8rem .9rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); }
.session.cancelled { opacity: .65; }
.session-date {
  width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; padding: .35rem 0; border-radius: 5px;
  color: #f8e7b6; background: linear-gradient(180deg, #a8322a, #5f120d); border: 1px solid var(--gold);
}
.sd-day { font-family: var(--heading); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.sd-month { font-family: var(--heading); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.sd-time { margin-top: .2rem; font-size: .8rem; color: var(--gold-light); }
.session-body { flex: 1; min-width: 0; }
.session-body h3 { margin: 0 0 .1rem; color: var(--ink); text-transform: none; letter-spacing: .02em; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rsvp-lists > div { margin: .3rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.rsvp { display: grid; gap: .4rem; margin: .6rem 0 .3rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.btn.rsvp-yes.chosen { background: linear-gradient(180deg, #3f7f45, #2e6334); border-color: #1f4423; }
.btn.rsvp-maybe.chosen { color: #4a3505; text-shadow: none; background: linear-gradient(180deg, var(--gold-light), var(--gold)); border-color: var(--gold-dark); }
.sessions.past .session { opacity: .7; }

.creatures { display: grid; gap: .7rem; }
.creature { padding: .7rem .8rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .3); }
.creature header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.creature h3 { margin: 0; flex: 1; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.creature-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f1e7d6; background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b); }
.log.protocol { max-height: none; }

/* --------------------------------------------------------------------------
   Glocke, Briefe, Tauschhandel, Clankasse
   -------------------------------------------------------------------------- */

.userbox { position: relative; }
.userbox a, .userbox button { position: relative; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .7rem; font-weight: 700; color: #fff; background: var(--blood-light);
  border: 1px solid #fbe9c4; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(380px, calc(100vw - 2rem));
  max-height: 70vh; overflow-y: auto; padding: .9rem 1rem; border-radius: 6px; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid var(--gold-dark); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; font-family: var(--heading); }
.notif-panel ul { list-style: none; margin: 0; padding: 0; }
.notif-panel li { padding: .45rem .4rem; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.notif-panel li.unread { background: rgba(236, 210, 126, .35); border-left: 3px solid var(--blood); }
.notif-panel time { display: block; font-family: var(--heading); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.notif-all { display: block; margin-top: .5rem; text-align: center; font-family: var(--heading); font-size: .75rem; }
.userbox .notif-panel a {
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: inline; color: var(--blood); text-decoration: underline; text-underline-offset: 2px;
}
.userbox .notif-panel a:hover { background: none; color: var(--blood-light); }
.userbox .notif-panel .notif-head a { padding: .15rem .55rem; border: 1px solid var(--blood); border-radius: 99px; font-size: .72rem; text-decoration: none; white-space: nowrap; }
.userbox .notif-panel a.notif-all { display: block; }

.narrow-page.wide { max-width: 760px; }
.letters { list-style: none; margin: .6rem 0 0; padding: 0; }
.letter { border-bottom: 1px dashed var(--line); }
.letter-head {
  width: 100%; display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: none; border: 0;
}
li.letter > .letter-head:hover { background: rgba(255, 250, 235, .45); }
.letter-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.letter-meta small { color: var(--ink-soft); }
.letter time { font-family: var(--heading); font-size: .66rem; letter-spacing: .05em; color: var(--ink-soft); white-space: nowrap; }
.letter.unread .letter-meta strong { color: var(--blood); }
.letter.unread .seal { background: radial-gradient(circle at 35% 30%, #c2463c, #5f120d); color: #fbe9c4; }
.letter .seal {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--ink-soft); background: rgba(212, 187, 133, .6); border: 1px solid rgba(110, 78, 38, .35);
}
.letter.broadcast .seal { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--ink); }
.letter-body { padding: .2rem .4rem .8rem 3rem; }
ul.letters > li.read:not(:has(> .letter-head)) { padding: .6rem .3rem; }
.broadcast { margin-bottom: .8rem; }
.recipients { margin-bottom: .8rem; }

.trade-list { list-style: none; margin: 0; padding: 0; }
.trade-list a { display: flex; align-items: center; gap: .6rem; padding: .55rem .3rem; border-bottom: 1px dashed var(--line); color: var(--ink); text-decoration: none; }
.trade-list a:hover { background: rgba(255, 250, 235, .45); }
.trade-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.trade-head h2 { margin: 0; }
.trade-table { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin: 1rem 0; }
.trade-side { padding: .8rem 1rem; border-radius: 6px; background: rgba(255, 250, 235, .55); border: 2px dashed rgba(110, 78, 38, .4); }
.trade-side.agreed { border-style: solid; border-color: var(--forest); box-shadow: 0 0 14px rgba(46, 99, 52, .3); }
.trade-side h3 { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.trade-items { list-style: none; margin: 0 0 .5rem; padding: 0; }
.trade-items li { padding: .2rem 0; display: flex; gap: .3rem; align-items: center; }
.trade-gold .coins { font-size: 1.2rem; }
.trade-swap { display: flex; align-items: center; font-size: 2rem; color: var(--gold-dark); }
@media (max-width: 640px) { .trade-table { grid-template-columns: 1fr; } .trade-swap { justify-content: center; transform: rotate(90deg); } }

.clan-bank .bank-gold { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 4px; background: rgba(0, 0, 0, .25); border: 1px solid #6b6f76; }
.clan-bank .bank-gold span:first-child { font-family: var(--heading); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a8; }
.clan-bank .bank-gold .coins { color: var(--gold-light); font-size: 1.3rem; }
.clan-bank h3 { color: var(--gold-light); }
.clan-bank label > span { color: #b8bec7; }
.clan-bank .hint, .vault-empty { color: #b8bec7; }
.bank-items { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bank-items li { padding: .2rem .6rem; border-radius: 4px; background: rgba(255, 255, 255, .08); border: 1px solid #6b6f76; color: #f3ede0; }

/* --------------------------------------------------------------------------
   Season, Gilden, Fraktionen, Klagen
   -------------------------------------------------------------------------- */

.soon.scene-header { min-height: 340px; margin-bottom: 1.2rem; padding: 2.2rem 1.5rem; }
.season-stats { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.season-stats div {
  min-width: 120px; padding: .5rem .9rem; border-radius: 5px; text-align: center;
  background: rgba(10, 6, 4, .6); border: 1px solid rgba(201, 162, 39, .55);
}
.season-stats b { display: block; font-family: var(--heading); font-size: 1.3rem; color: var(--gold-light); }
.season-stats small { color: #d8c8b8; font-size: .8rem; }
.goals { list-style: none; margin: 0; padding: 0; }
.goals li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.goal-check {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid rgba(110, 78, 38, .45); color: #f2f6e9; font-weight: 700;
}
.goals li.done .goal-check { background: var(--forest); border-color: #1f4423; }
.goal-body { flex: 1; min-width: 0; }
.goal-points { font-family: var(--heading); font-weight: 700; color: #3b2a6e; white-space: nowrap; }
.season-ranking, .past-seasons { list-style: none; margin: 0; padding: 0; }
.season-ranking li { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border-bottom: 1px dashed var(--line); }
.season-ranking li.me { outline: 2px solid var(--gold); border-radius: 4px; }
.season-ranking .who { flex: 1; min-width: 0; }
.season-ranking .medal { width: 30px; height: 30px; }
.season-ranking .place-1 .medal { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }
.season-ranking .place-2 .medal { background: radial-gradient(circle at 35% 30%, #ffffff, #b8bec7 60%, #6d747e); }
.season-ranking .place-3 .medal { background: radial-gradient(circle at 35% 30%, #f5c9a0, #b06b32 60%, #6a3a14); }
.past-seasons li { padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.winners { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .35rem; }
.winner { display: inline-flex; align-items: center; gap: .35rem; }
.winner .medal { width: 24px; height: 24px; font-size: .75rem; }
.winner.place-1 .medal { background: radial-gradient(circle at 35% 30%, #fff1b8, #c9a227 60%, #7d5c12); }

.org header { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.org header h3 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.15rem; }
.org.mine { box-shadow: 0 0 0 2px var(--gold); border-radius: 6px; padding: .3rem; }
.org-members { list-style: none; margin: .4rem 0; padding: 0; }
.org-members li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.org-members small { color: var(--ink-soft); }
.org-members .actions { margin-left: auto; }
.rank-progress { margin-bottom: .4rem; }

.factions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.faction {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem 1rem; text-align: center; border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--faction) 22%, transparent), rgba(255, 250, 235, .5));
  border: 2px solid color-mix(in srgb, var(--faction) 60%, transparent);
}
.faction.mine { box-shadow: 0 0 0 3px var(--gold), 0 0 22px color-mix(in srgb, var(--faction) 50%, transparent); }
.faction h3 { margin: 0; font-size: 1.2rem; color: var(--ink); text-transform: none; }
.faction-stats { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; font-size: .9rem; color: var(--ink-soft); }
.faction-stats b { font-family: var(--heading); color: var(--ink); }
.faction .quest-heroes { justify-content: center; }
.territories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .9rem; }
.territory {
  padding: .8rem .9rem; border-radius: 5px; background: rgba(255, 250, 235, .55);
  border: 1px solid rgba(110, 78, 38, .35); border-top: 5px solid var(--faction, #8a7a62);
}
.territory.contested { border-top-color: var(--blood); background-image: repeating-linear-gradient(135deg, rgba(126, 26, 20, .06) 0 8px, transparent 8px 16px); }
.territory header { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.territory header h3 { margin: 0; flex: 1; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.influence-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin: .5rem 0 .3rem; background: rgba(110, 78, 38, .18); border: 1px solid rgba(110, 78, 38, .35); }
.influence-bar span { display: block; height: 100%; }
.influence-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .85rem; color: var(--ink-soft); }
.influence-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: 0; }

.complaints { display: grid; gap: 1rem; }
.complaint { padding: .9rem 1rem; border-radius: 5px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(110, 78, 38, .35); border-left: 5px solid var(--gold-dark); }
.complaint.guilty { border-left-color: var(--blood); }
.complaint.dismissed { border-left-color: #8a7a62; opacity: .85; }
.complaint header { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.complaint header > div { flex: 1; min-width: 200px; }
.complaint header h3 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 1.02rem; }
.statement { margin: .5rem 0; padding: .5rem .8rem; border-left: 3px solid rgba(110, 78, 38, .45); background: rgba(255, 255, 255, .35); font-style: italic; white-space: pre-wrap; }
.statement small, .verdict small { display: block; font-style: normal; font-family: var(--heading); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.statement.defense { border-left-color: var(--mana); }
.verdict { margin: .6rem 0; padding: .6rem .8rem; border-radius: 4px; background: rgba(126, 26, 20, .08); border: 1px solid rgba(126, 26, 20, .35); }
.verdict p { margin: .2rem 0; }
.verdict-form { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.fate-facts.dark li { color: var(--ink); }

/* --------------------------------------------------------------------------
   Tresor
   -------------------------------------------------------------------------- */

.vault-card {
  background:
    var(--noise),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #3a3d43 0%, #24262b 100%);
  border-color: #121316;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(201, 162, 39, .45), inset 0 0 40px rgba(0, 0, 0, .55), var(--shadow);
  color: #e6e1d6;
}
.vault-card::before, .vault-card::after {
  width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c7cbd2, #5b5f66 60%, #2a2c30);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.vault-card::before { top: 12px; left: 12px; }
.vault-card::after { bottom: 12px; right: 12px; transform: none; }
.vault-card > h2 { color: var(--gold-light); flex-direction: row; align-items: center; flex-wrap: wrap; }
.vault-card > h2::after { flex-basis: 100%; }
.vault-warning {
  display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; margin-bottom: 1rem; border-radius: 4px;
  color: #f1d9c9; background: rgba(126, 26, 20, .35); border: 1px solid rgba(201, 80, 60, .45);
}
.vault-warning .icon { font-size: 1.5rem; color: #e8806e; }
.vault-warning strong { color: var(--gold-light); }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; }
.vault-slot {
  position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto auto; column-gap: .6rem; align-items: center;
  min-height: 84px; padding: .65rem .7rem; border-radius: 6px;
  background: linear-gradient(180deg, #2b2e33, #1a1c20);
  border: 2px solid #6b6f76;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #0d0e10, 0 2px 0 rgba(0, 0, 0, .4);
}
/* Nieten in den Ecken jedes Fachs */
.vault-slot::before, .vault-slot::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d3d7dd, #6b6f76); top: 5px;
}
.vault-slot::before { left: 5px; }
.vault-slot::after { right: 5px; }
.vault-lock {
  grid-row: 1 / span 3; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 50%;
  color: var(--gold-light); background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b); border: 2px solid var(--gold-dark);
}
.vault-label { font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9aa0a8; }
.vault-item { font-weight: 600; color: #f3ede0; line-height: 1.2; }
.vault-item small { color: var(--gold-light); font-family: var(--heading); }
.vault-slot.empty { border-style: dashed; border-color: #4b4f56; }
.vault-slot.empty .vault-lock { color: #6b6f76; border-color: #3a3d43; }
.vault-slot.empty .vault-item { font-style: italic; font-weight: 400; color: #7d838b; }
.vault-slot.filled { border-color: var(--gold-dark); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #0d0e10, 0 0 12px rgba(201, 162, 39, .25); }
.vault-out {
  justify-self: start; margin-top: .3rem; padding: .15rem .55rem; cursor: pointer; border-radius: 3px;
  font-family: var(--heading); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #e6e1d6; background: rgba(255, 255, 255, .06); border: 1px solid #6b6f76;
}
.vault-out:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold); }
.btn.vault-btn {
  color: #e6e1d6; text-shadow: none;
  background: linear-gradient(180deg, #4b4f56, #24262b); border-color: #6b6f76;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 0 #0d0e10;
}
.btn.vault-btn:hover { color: var(--gold-light); border-color: var(--gold); }
.tag.vault { color: #e6e1d6; background: #3a3d43; border-color: #17181b; }
.tag.ban { color: #fbe9c4; background: #3a3d43; border-color: #17181b; }
.tag .icon { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Einladungscodes
   -------------------------------------------------------------------------- */

.invite-fresh {
  margin: 1.1rem 0; padding: 1rem 1.2rem; text-align: center; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .85));
  border: 2px dashed var(--gold-dark); box-shadow: 0 0 18px rgba(201, 162, 39, .3);
}
.invite-label { font-family: var(--heading); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.invite-code {
  display: inline-block; margin: .35rem 0 .6rem; padding: .15rem .6rem; border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; font-size: 2rem; letter-spacing: .14em;
  color: var(--blood); background: rgba(255, 255, 255, .55); border: 1px solid rgba(110, 78, 38, .35);
  user-select: all;
}
.invite-code.small { margin: 0; font-size: .95rem; letter-spacing: .08em; padding: .05rem .4rem; }
table.invites { margin-top: 1rem; }
.qr { display: flex; justify-content: center; margin: .8rem 0; }
.qr img { border-radius: 6px; border: 3px solid var(--gold-dark); background: #fffaf0; }
code.secret { font-size: .95rem; letter-spacing: .08em; user-select: all; }
.steps { margin: 0 0 .6rem 1.2rem; }
.otp-field { margin-top: .4rem; }
table.invites tr.muted td { opacity: .6; }
input.code-input {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.25rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: center;
}
.hint.center { text-align: center; }

/* --------------------------------------------------------------------------
   Bann-Verwaltung
   -------------------------------------------------------------------------- */

.exclusions { list-style: none; margin: 0; padding: 0; }
.exclusion { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.excl-icon {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 50%;
  color: #f1e7d6; background: radial-gradient(circle at 35% 30%, #4b4f56, #17181b);
}
.exclusion.death .excl-icon { background: radial-gradient(circle at 35% 30%, #b0392f, #3d0907); }
.excl-body { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Death Screen & Bann-Screen
   -------------------------------------------------------------------------- */

.fate {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; isolation: isolate;
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 22vh;
}
.fate-scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; }
.fate::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(8, 2, 2, .78), rgba(8, 2, 2, .3) 65%, transparent 90%);
}
.fate-death::after { animation: death-pulse 6s ease-in-out infinite; }
.fate-content { max-width: 560px; text-align: center; color: #eadfd2; animation: fate-in 1.6s ease-out both; }
.fate-sigil {
  width: 88px; height: 88px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 3rem; border-radius: 50%;
  color: #f4e9dc; background: radial-gradient(circle at 35% 30%, #8e1f18, #2a0504); border: 2px solid #c9a227;
  box-shadow: 0 0 30px rgba(200, 40, 30, .6), inset 0 0 12px rgba(0, 0, 0, .6);
}
.fate-ban .fate-sigil { background: radial-gradient(circle at 35% 30%, #4b4f56, #111214); box-shadow: 0 0 30px rgba(0, 0, 0, .8), inset 0 0 12px rgba(0, 0, 0, .6); }
.fate-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05;
  background: linear-gradient(180deg, #fff1e6, #e7b8a8 45%, #a8322a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 24px rgba(200, 40, 30, .55));
}
.fate-ban .fate-title { background-image: linear-gradient(180deg, #f2efe9, #b9bec6 50%, #6b6f76); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)); }
.fate-reason { margin: .9rem 0 .2rem; font-family: var(--heading); font-size: 1.05rem; letter-spacing: .06em; color: #f1d9c9; }
.fate-note { font-style: italic; color: #d8c8b8; }
.fate-text { color: #d8c8b8; }
.fate-clock {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  margin: 1.2rem 0; padding: .8rem 1.8rem; border-radius: 6px;
  background: rgba(10, 3, 3, .7); border: 1px solid rgba(201, 162, 39, .55); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35);
}
.fate-clock-label { font-family: var(--heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #c9a9a0; }
.fate-clock strong { font-family: var(--heading); font-size: 2.4rem; letter-spacing: .06em; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.fate-clock small { color: #a89488; }
.fate-facts { list-style: none; margin: 0 auto 1.4rem; padding: 0; max-width: 440px; text-align: left; }
.fate-facts li { position: relative; padding: .3rem 0 .3rem 1.5rem; color: #e6d6c8; }
.fate-facts li::before { content: "✝"; position: absolute; left: 0; color: #c9a227; }
.fate .btn.secondary { color: #eadfd2; background: rgba(0, 0, 0, .45); border-color: #6b6f76; box-shadow: none; }

@keyframes fate-in { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes death-pulse { 50% { background-color: rgba(90, 10, 8, .18); } }
@keyframes ash { from { transform: translate(0, 0); } to { transform: translate(-60px, 860px); } }
@keyframes cloud { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.fate .ash { animation: ash 12s linear infinite; }
.fate .cloud { animation: cloud 20s ease-in-out infinite alternate; }
.fate .fog { animation: drift 16s ease-in-out infinite alternate; }
.fate .fog-slow { animation-duration: 24s; animation-direction: alternate-reverse; }
.fate .crows-fly { animation: glide 14s ease-in-out infinite alternate; }
.fate .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Bündnisse: Umschaltleiste Gilde / Fraktion / Clan
   -------------------------------------------------------------------------- */

.alliance-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 640px; margin: 0 auto 1.6rem; padding: 5px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
  border: 1px solid var(--gold-dark); border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(236, 210, 126, .15);
}
.alliance-bar a {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem .5rem; border-radius: 7px;
  font-family: var(--heading); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--parchment-dark); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.alliance-bar a:hover { color: var(--gold-light); background: rgba(201, 162, 39, .1); }
.alliance-bar a.active {
  color: #f8e7b6;
  background: linear-gradient(180deg, #a8322a 0%, #7e1a14 60%, #5f120d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 0 0 1px var(--gold), 0 4px 10px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.alliance-bar .icon { width: 1.3em; height: 1.3em; }
.soon-dot {
  font-family: var(--body); font-style: italic; font-weight: 400; font-size: .72rem; letter-spacing: 0; text-transform: none;
  padding: 0 .4rem; border-radius: 99px; color: #4a3505; background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* --------------------------------------------------------------------------
   „Wird in Kürze veröffentlicht“
   -------------------------------------------------------------------------- */

.soon {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 560px; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; border-radius: 6px;
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(201, 162, 39, .35), var(--shadow);
}
.soon-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.soon::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(10, 6, 4, .72), rgba(10, 6, 4, .35) 60%, transparent 85%);
}
.soon-content { max-width: 640px; text-align: center; color: var(--parchment-light); }
.soon-kicker {
  margin: 0 0 .6rem; font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light);
}
.soon-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.1;
  background: linear-gradient(180deg, #fff3c4, #e1b94a 55%, #a87b1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(236, 190, 90, .35));
}
.soon-seal {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 1.3rem 0 1.1rem; padding: .55rem 1.3rem;
  font-family: var(--heading); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: #f8e7b6; background: linear-gradient(180deg, rgba(168, 50, 42, .92), rgba(95, 18, 13, .92));
  border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .5);
  animation: seal-glow 3.2s ease-in-out infinite;
}
.soon-seal .icon { color: var(--gold-light); }
.soon-text { font-size: 1.15rem; line-height: 1.55; color: #f3e6c7; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.soon-rumors {
  margin: 1.4rem auto 0; max-width: 520px; padding: 1rem 1.3rem; text-align: left;
  background: rgba(15, 9, 5, .55); border: 1px solid rgba(201, 162, 39, .35); border-radius: 4px;
  backdrop-filter: blur(2px);
}
.soon-rumors h2 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.soon-rumors ul { margin: 0; padding: 0; list-style: none; }
.soon-rumors li { position: relative; padding: .25rem 0 .25rem 1.3rem; font-style: italic; color: #eadbb8; }
.soon-rumors li::before { content: "❧"; position: absolute; left: 0; color: var(--gold); font-style: normal; }

/* Animationen der Szenen */
@keyframes seal-glow { 50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 26px rgba(236, 190, 90, .55); } }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
@keyframes shooting {
  0%, 82% { transform: translate(1100px, 30px); opacity: 0; }
  84% { opacity: 1; }
  92% { transform: translate(760px, 190px); opacity: 0; }
  100% { transform: translate(760px, 190px); opacity: 0; }
}
@keyframes sand { to { stroke-dashoffset: -20; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes flicker { 0%, 100% { transform: scale(1, 1); opacity: 1; } 30% { transform: scale(.92, 1.08); opacity: .85; } 60% { transform: scale(1.06, .94); } }
@keyframes rise { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(-30px, -330px); opacity: 0; } }
@keyframes drift { from { transform: translateX(-150px); } to { transform: translateX(150px); } }
@keyframes wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-3deg); } }
@keyframes glide { from { transform: translate(-60px, 10px); } to { transform: translate(60px, -10px); } }

.soon .twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.soon .shooting { animation: shooting 9s linear infinite; }
.soon .sand-fall { animation: sand .6s linear infinite; }
.soon .banner { transform-box: fill-box; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; }
.soon .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite; }
.soon .ember { animation: rise 6s linear infinite; }
.soon .fog { animation: drift 14s ease-in-out infinite alternate; }
.soon .fog-slow { animation-duration: 22s; animation-direction: alternate-reverse; }
.soon .flag { transform-box: fill-box; animation: wave 2.6s ease-in-out infinite; }
.soon .flag-left { transform-origin: 0 50%; }
.soon .flag-right { transform-origin: 100% 50%; animation-delay: -1.3s; }
.soon .crows { animation: glide 12s ease-in-out infinite alternate; }

/* Gerichtssaal */
@keyframes gavel {
  0%, 100% { transform: rotate(28deg); }
  22% { transform: rotate(36deg); }
  30% { transform: rotate(0deg); }
  35% { transform: rotate(4deg); }
  40%, 62% { transform: rotate(0deg); }
}
@keyframes shock {
  0%, 29% { transform: scale(.25); opacity: 0; }
  31% { transform: scale(.35); opacity: .95; }
  62%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes beam { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pan-left { 0%, 100% { transform: translateY(7px); } 50% { transform: translateY(-7px); } }
@keyframes pan-right { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes mote { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } to { transform: translate(40px, -260px); opacity: 0; } }
@keyframes ray { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.soon .gavel { transform-box: view-box; transform-origin: 0 0; animation: gavel 2.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.soon .shock { transform-box: fill-box; transform-origin: 50% 50%; animation: shock 2.8s ease-out infinite; }
.soon .shock-2 { animation-delay: .12s; }
.soon .scale-beam { transform-box: view-box; transform-origin: 0 0; animation: beam 6s ease-in-out infinite; }
.soon .pan-left { animation: pan-left 6s ease-in-out infinite; }
.soon .pan-right { animation: pan-right 6s ease-in-out infinite; }
.soon .mote { animation: mote 9s linear infinite; }
.soon .ray { animation: ray 7s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

#toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 2rem); padding: .7rem 1.4rem;
  font-family: var(--heading); font-size: .9rem; letter-spacing: .03em; color: var(--ink);
  background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment));
  border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
#toast.err { color: #fbe9c4; background: linear-gradient(180deg, #a8322a, #6a130d); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { padding: 1.1rem .75rem 2.5rem; }
  .topbar-row { padding: .45rem .75rem .1rem; }
  .brand { font-size: 1.25rem; }
  .userbox .who { display: none; }
  .topbar { position: static; }
  .mainnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; padding: .3rem .4rem .55rem; overflow: visible; }
  .mainnav a {
    flex-direction: column; gap: .15rem; justify-content: center;
    padding: .4rem .1rem; font-size: .54rem; letter-spacing: .02em;
    border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px; background: rgba(0, 0, 0, .2);
  }
  .mainnav a .icon { width: 1.35rem; height: 1.35rem; }
  .mainnav a.active { margin-bottom: 0; padding-bottom: .4rem; border-color: var(--gold); }
  .userbox a.gm-link { width: 36px; padding: 0; }
  .userbox a.gm-link span { display: none; }
  .card { padding: 1.25rem 1rem 1.1rem; }
  .card::before, .card::after { width: 28px; height: 28px; }
  .page-title h1, .hero-banner h1, .clan-banner h1 { font-size: 1.7rem; }
  .attrs { gap: .5rem .35rem; }
  .attr .v { font-size: 1.45rem; }
  .gate-title { font-size: 2rem; }
  .clan-form-grid { grid-template-columns: 1fr; justify-items: center; }
  .alliance-bar a { flex-direction: column; gap: .15rem; font-size: .74rem; padding: .5rem .3rem; }
  /* Szene als vollständiges Bildband über dem Text statt angeschnitten dahinter */
  .soon { display: block; min-height: 0; padding: 0; }
  .soon-scene { position: relative; display: block; height: auto; aspect-ratio: 1200 / 560; z-index: 0; }
  .soon::after { display: none; }
  .soon-content { padding: 1.4rem 1rem 1.8rem; border-top: 1px solid var(--gold-dark); }
  .soon-season { background: #0b0716; }
  .soon-guild { background: #0f0905; }
  .soon-faction { background: #0a0407; }
  .soon-seal { font-size: .78rem; letter-spacing: .08em; padding: .5rem .9rem; }
  .soon-seal .icon { display: none; }
  .soon-text { font-size: 1.05rem; }
  .clan-form-grid > div { width: 100%; }

  /* Inventar als Karten statt Tabelle */
  table.inv thead { display: none; }
  table.inv tr {
    display: grid; grid-template-columns: 1fr auto auto; gap: .3rem .8rem; align-items: center;
    padding: .7rem 0; border-bottom: 1px dashed var(--line);
  }
  table.inv td { border: 0; padding: 0; }
  table.inv td.c-name { grid-column: 1 / -1; }
  table.inv td.c-qty::before { content: "Anzahl "; color: var(--ink-soft); font-size: .8rem; }
  table.inv td.c-act { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Fraktionen: Karte der Fünf Lande ------------------------------------- */
.fmap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; margin-bottom: 1.4rem; }
@media (max-width: 980px) { .fmap-layout { grid-template-columns: 1fr; } }
.fmap-frame {
  padding: .8rem; border-radius: 8px;
  background: var(--noise), linear-gradient(180deg, #3a2614, #22160c);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .18);
}
.fmap-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.fmap-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.fmap-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem .28rem .45rem; border-radius: 99px; cursor: pointer;
  font-family: var(--heading); font-size: .74rem; letter-spacing: .03em; color: var(--parchment-light);
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35);
}
.fmap-chip i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold-light); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.fmap-chip b { min-width: 1.4em; padding: 0 .3em; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .7rem; text-align: center; }
.fmap-chip:hover, .fmap-chip.active { border-color: var(--gold); background: rgba(201, 162, 39, .22); }
.fmap-chip.secret { background: rgba(0, 0, 0, .65); }
.fmap-tools { display: flex; align-items: center; gap: .35rem; }
.fmap-zoom {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font: 700 1.1rem/1 var(--heading);
  color: var(--gold-light); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .45);
}
.fmap-zoom:hover { background: rgba(201, 162, 39, .25); }
.fmap-toggle { display: inline-flex; align-items: center; gap: .35rem; margin-right: .4rem; cursor: pointer; }
.fmap-toggle span { color: var(--parchment-light); font: italic .95rem var(--body); letter-spacing: 0; text-transform: none; }
.fmap-wrap { border-radius: 6px; overflow: hidden; border: 2px solid #6b4e1f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 4px 18px rgba(0, 0, 0, .5); }
.fmap { display: block; width: 100%; height: auto; touch-action: none; user-select: none; background: #2e4b57; }
.fmap.fm-zoomed { cursor: grab; }
.fmap-help { margin: .55rem .2rem 0; color: var(--parchment-dark); font-size: .85rem; font-style: italic; }

.fm-coast polygon { fill: #6a5232; stroke: #3b2a17; stroke-width: 2; }
.fm-ground polygon { stroke: rgba(70, 48, 22, .45); stroke-width: 1; }
.fm-owners polygon { stroke: rgba(30, 18, 8, .55); stroke-width: 1.2; transition: opacity .2s; }
.fm-road-base { stroke: #f1e2b4; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.fm-road { stroke: #5a3815; stroke-width: 1.8; stroke-dasharray: 4 3.5; stroke-linecap: round; }
.fm-label {
  font-family: var(--heading); font-weight: 700; text-anchor: middle; fill: #2b1c0f;
  paint-order: stroke; stroke: rgba(247, 236, 208, .9); stroke-width: 2.6px; stroke-linejoin: round; pointer-events: none;
}
.fm-cell.dark .fm-label { fill: #f3e2b0; stroke: rgba(10, 6, 4, .85); }
.fm-cell.dark .fm-glyph { opacity: .75; }
.fm-hq-label { font-family: var(--heading); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: #f6e3a1; paint-order: stroke; stroke: rgba(20, 12, 6, .8); stroke-width: 2px; pointer-events: none; }
.fm-hq-ring { fill: none; stroke: #e8c766; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7)); }
.fm-glyph, .fm-cell { pointer-events: none; }
.fm-reach { fill: none; stroke: #ffe58a; stroke-width: 2; stroke-dasharray: 4 3; opacity: .95; }
.fmap.fm-hide-reach .fm-reach { display: none; }
.fm-hit { fill: transparent; cursor: pointer; outline: none; }
.fm-hit:hover, .fm-hit:focus-visible { fill: rgba(255, 244, 200, .22); stroke: #fff4c8; stroke-width: 2; }
.fm-selection { fill: rgba(255, 240, 180, .18); stroke: #ffd84d; stroke-width: 4; stroke-dasharray: 10 6; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 215, 80, .9)); animation: fm-march 1.2s linear infinite; }
@keyframes fm-march { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .fm-selection { animation: none; } }
.fmap.fm-small .fm-label, .fmap.fm-small .fm-hq-label { display: none; }
.fmap.fm-focus .fm-owners polygon { opacity: .25; }
.fmap.fm-focus .fm-cell:not(.focus) { opacity: .45; }

.fmap-panel { position: sticky; top: 1rem; }
@media (max-width: 980px) { .fmap-panel { position: static; } }
.fmap-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.fmap-panel-head h2 { margin: 0 0 .4rem; }
.fmap-terrain { margin: 0; font-family: var(--heading); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tag.fmap-owner { color: #fff8e6; border-color: rgba(0, 0, 0, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.fmap-sub { margin: 1rem 0 .35rem; font-size: .78rem; letter-spacing: .1em; color: var(--blood); }
.fmap-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.fmap-support { margin-top: 1rem; }
.fmap-mine { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.fmap-mine strong { font-family: var(--heading); font-size: 1.1rem; }
.fmap-gm { margin-top: 1.2rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.fmap-gm summary { cursor: pointer; font-family: var(--heading); color: var(--blood); letter-spacing: .06em; }
.fmap-gm-influence { display: grid; gap: .3rem; margin-top: .5rem; }
.fmap-gm-row { display: grid; grid-template-columns: 14px 1fr auto auto auto; align-items: center; gap: .4rem; font-size: .92rem; }
.fmap-gm-row i { width: 12px; height: 12px; border-radius: 50%; }
.fmap-gm-row b { min-width: 2em; text-align: right; font-family: var(--heading); }
.fmap-gm-roads { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .25rem .6rem; font-size: .92rem; }
.fmap-rules { margin: 0; padding-left: 1.2rem; line-height: 1.6; }

.faction-motto { margin: -.2rem 0 0; font-style: italic; color: var(--ink-soft); }
.faction-hq { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.tag.faction-forbidden { background: #15110f; color: #e8c766; border-color: #000; letter-spacing: .12em; }
.faction.secret {
  color: #eadbb4; border-color: #000;
  background: var(--noise), radial-gradient(circle at 50% 0, #3a2d24, #120d0a 75%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .8), var(--shadow);
}
.faction.secret h3, .faction.secret .faction-stats b { color: #f3e2b0; }
.faction.secret .faction-stats, .faction.secret .faction-motto, .faction.secret .faction-hq, .faction.secret .hint { color: #b9a682; }
.faction.secret .faction-hq a { color: var(--gold-light); }
.btn.dark { background: linear-gradient(180deg, #2b231d, #0f0b09); border-color: #000; color: var(--gold-light); }
.btn.dark:hover { background: #000; }

/* ---- Fraktionen: Vorteile, Tribut, Ränge --------------------------------- */
.fm-perk circle { fill: #f3d67a; stroke: #6b4e12; stroke-width: 1.4; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
.fm-perk path { fill: #7a1a12; }
.fmap-star { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #7a1a12; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b84a); border: 1px solid #8a6a1c; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-size: .9rem; }
.fmap-perk-box { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; padding: .55rem .7rem; border-radius: 6px; background: rgba(236, 210, 126, .35); border: 1px solid rgba(138, 106, 28, .45); }
.fmap-perk-box p { margin: .1rem 0 0; font-size: .95rem; }
.fmap-yield { margin: .4rem 0 0; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.fmap-rank { margin: .1rem 0 .2rem; font-family: var(--heading); color: var(--blood); letter-spacing: .04em; }
.fmap-rank small { font-family: var(--body); color: var(--ink-soft); letter-spacing: 0; }
.fmap-rank-bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(110, 78, 38, .2); border: 1px solid rgba(110, 78, 38, .35); }
.fmap-rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
.fmap-tribute { margin-top: .4rem; padding: .7rem .8rem; border-radius: 6px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.fmap-tribute .fmap-sub { margin-top: 0; }
.fmap-tribute ul, .fmap-yields { list-style: none; margin: 0 0 .7rem; padding: 0; }
.fmap-tribute li, .fmap-yields li { display: flex; justify-content: space-between; gap: .6rem; padding: .18rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.fmap-tribute li b, .fmap-yields li b { font-family: var(--heading); white-space: nowrap; }
.btn.fmap-claim { width: 100%; justify-content: center; }
.fmap-claimed { margin: 0; color: var(--forest); font-style: italic; }
.fmap-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fmap-perks li { display: flex; gap: .55rem; align-items: center; }
.fmap-perks small, .fmap-perk-list small { display: block; color: var(--ink-soft); font-size: .88rem; }
.fmap-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.fmap-benefits-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .fmap-benefits { grid-template-columns: 1fr; } }
.fmap-ranks { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fmap-ranks th { text-align: left; font-family: var(--heading); font-size: .7rem; letter-spacing: .08em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: .25rem .3rem; }
.fmap-ranks td { padding: .3rem; border-bottom: 1px dashed var(--line); }
.fmap-ranks .num { text-align: right; }
.fmap-perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5rem .9rem; }
.fmap-perk-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .4rem .5rem; border-radius: 6px; background: rgba(255, 250, 235, .45); border: 1px solid var(--line); }
.fmap-perk-list .tag { font-size: .62rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blood); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.faction-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.faction-perks .chip { font-size: .8rem; color: #6a4c0c; }
.faction.secret .faction-perks .chip { background: rgba(232, 199, 102, .15); color: var(--gold-light); border-color: rgba(232, 199, 102, .3); }
.price s { margin-right: .3rem; color: var(--ink-soft); font-size: .85em; }
.price .perk-note { display: block; font-size: .75rem; color: var(--forest); font-style: italic; }

/* ---- Season: Halloween-Countdown ------------------------------------------ */
.hw {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(78vh, 720px); display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem 9rem; border-radius: 8px; background: #0d0618;
  border: 1px solid #7a3a10;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(255, 140, 40, .35), 0 0 40px rgba(255, 110, 20, .18), var(--shadow);
}
.hw-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hw::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 42%, rgba(8, 3, 14, .7), rgba(8, 3, 14, .25) 65%, transparent 90%);
}
.hw-content { max-width: 760px; text-align: center; }
.hw-kicker { margin: 0 0 .4rem; font-family: var(--heading); font-weight: 700; font-size: .85rem; letter-spacing: .34em; text-transform: uppercase; color: #ffb35c; text-shadow: 0 0 10px rgba(255, 120, 30, .6); }
.hw-title {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffe7a8 0%, #ff9a2e 45%, #c2410c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 26px rgba(255, 120, 20, .55));
}
.hw-sub { margin: .7rem auto 1.6rem; max-width: 34rem; font-style: italic; font-size: 1.2rem; color: #f1dcc0; text-shadow: 0 1px 4px #000; }
.hw-timer { display: flex; justify-content: center; gap: clamp(.4rem, 2vw, 1rem); }
.hw-unit {
  min-width: clamp(68px, 18vw, 118px); padding: .7rem .4rem .55rem; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, rgba(40, 18, 46, .92), rgba(16, 7, 20, .95));
  border: 1px solid rgba(255, 140, 40, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 110, 20, .25), inset 0 -10px 20px rgba(255, 110, 20, .12);
}
.hw-digits {
  display: block; font-family: var(--heading); font-weight: 700; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: #ffcf7a; text-shadow: 0 0 12px rgba(255, 140, 30, .85), 0 2px 0 #000;
}
.hw-label { display: block; margin-top: .25rem; font-family: var(--heading); font-size: clamp(.58rem, 1.8vw, .72rem); letter-spacing: .16em; text-transform: uppercase; color: #d9b59a; }
.hw-when { margin: 1.2rem 0 0; font-family: var(--heading); font-size: .9rem; letter-spacing: .06em; color: #f0c48f; text-shadow: 0 1px 3px #000; }
.hw-open { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 6vw, 3rem); color: #ffcf7a; text-shadow: 0 0 20px rgba(255, 140, 30, .9), 0 3px 0 #000; animation: hw-pulse 2s ease-in-out infinite; }
.hw-gm { margin-top: 1.4rem; }

.hw .hw-twinkle { animation: twinkle 3.5s ease-in-out infinite; }
.hw .hw-bat { animation: hw-fly 16s linear infinite; }
.hw .hw-bat-slow { animation-duration: 24s; }
.hw .hw-flap { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-flap .32s ease-in-out infinite alternate; }
.hw .hw-flicker { animation: hw-flicker 2.4s steps(1, end) infinite; }
.hw .hw-glow { animation: hw-pulse 1.8s ease-in-out infinite; }
.hw .hw-window { animation: hw-flicker 3.2s steps(1, end) infinite; }
.hw .hw-ghost { animation: hw-float 6s ease-in-out infinite; }
.hw .hw-spider { animation: hw-spider 7s ease-in-out infinite; }
.hw .hw-fog { animation: hw-drift 28s linear infinite alternate; }
.hw .hw-fog-2 { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes hw-fly { from { transform: translate(-1400px, 40px); } 50% { transform: translate(-400px, -30px); } to { transform: translate(800px, 30px); } }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 12% { opacity: .75; } 18% { opacity: 1; } 47% { opacity: .85; } 52% { opacity: 1; } 78% { opacity: .7; } 83% { opacity: 1; } }
@keyframes hw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes hw-float { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50% { transform: translate(-30px, -22px); opacity: .55; } }
@keyframes hw-spider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-46px); } }
@keyframes hw-drift { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
@media (prefers-reduced-motion: reduce) {
  .hw .hw-bat, .hw .hw-flap, .hw .hw-flicker, .hw .hw-glow, .hw .hw-window, .hw .hw-ghost, .hw .hw-spider, .hw .hw-fog, .hw-open { animation: none; }
}
@media (max-width: 600px) { .hw { padding-bottom: 7rem; } .hw-sub { font-size: 1.05rem; } }
@media (max-aspect-ratio: 4/5) { .hw { align-items: flex-end; padding-top: 16rem; } }

/* ---- Navigation: kurze Beschriftung auf dem Handy ------------------------- */
.mainnav .nav-short { display: none; }
.mainnav a { gap: .35rem; }
@media (max-width: 1500px) {
  .mainnav .nav-long { display: none; }
  .mainnav .nav-short { display: inline; }
}

/* ---- Stufe im Heldenbanner -------------------------------------------------- */
.level-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle;
  width: 3.1rem; height: 3.1rem; margin-left: .7rem; border-radius: 50%; text-decoration: none;
  font-family: var(--heading); font-size: 1.3rem; line-height: 1; color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a 70%, #8a6a1c);
  border: 2px solid #f6e3a1; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 3px 10px rgba(0, 0, 0, .5);
}
.level-badge small { font-size: .45rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---- Fähigkeitsbaum ---------------------------------------------------------- */
.st-level {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin-bottom: 1.4rem; padding: 1.2rem 1.4rem;
  border-radius: 8px; color: var(--parchment-light);
  background: var(--noise), radial-gradient(ellipse at 20% 0, #4a2e14, #1d130b 75%);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .15);
}
.st-medal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  font-family: var(--display); color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e1b94a 55%, #8a6a1c);
  border: 3px solid #f6e3a1; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 30px rgba(236, 190, 90, .35);
}
.st-medal small { font-family: var(--heading); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.st-medal strong { font-size: 2.6rem; line-height: 1; }
.st-level h2 { margin: 0 0 .2rem; color: var(--gold-light); }
.st-level p { margin: .2rem 0; }
.st-level .hint { color: #cdb894; }
.st-xp { height: 12px; margin: .5rem 0; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 162, 39, .45); }
.st-xp span { display: block; height: 100%; background: linear-gradient(90deg, #8a6a1c, #f3d67a); box-shadow: 0 0 10px rgba(243, 214, 122, .6); }
.st-xp.small { height: 8px; background: rgba(110, 78, 38, .2); border-color: rgba(110, 78, 38, .35); }
.st-points { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 8rem; text-align: center; }
.st-points strong { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 200, 80, .5); }
.st-points span { font-family: var(--heading); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 760px) {
  .st-level { grid-template-columns: auto 1fr; }
  .st-points { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: .8rem; }
  .st-medal { width: 5rem; height: 5rem; }
  .st-medal strong { font-size: 2rem; }
}

/* Radialer Fähigkeitsbaum */
.tt-layout { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 980px) { .tt-layout { grid-template-columns: 1fr; } }
.tt-frame { background: var(--noise), linear-gradient(180deg, #1e252a, #0f1316); border-color: #3c4a52; }
.tt-wrap { border-radius: 12px; overflow: hidden; aspect-ratio: 1; max-width: 860px; margin: 0 auto; border: 2px solid #3c4a52; box-shadow: 0 0 0 1px #000, 0 0 40px rgba(0, 0, 0, .6); }
.tt-bg { fill: #0b0e10; }
.tt-disc { stroke: #3c4a52; stroke-width: 2; }
.p-krieger { --c: #d0392e; }
.p-wanderer { --c: #3fae55; }
.p-mystiker { --c: #4a86e0; }
.tt { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.tt.tt-zoomed { cursor: grab; }
.tt-rings circle { fill: none; stroke: rgba(160, 190, 200, .06); stroke-width: 1; }
.tt-spine line { stroke: rgba(235, 240, 245, .55); stroke-width: 2.5; }
.tt-step circle { fill: #2a3238; stroke: rgba(235, 240, 245, .45); stroke-width: 2; }
.tt-step.on circle { fill: #f4f7fa; stroke: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }
.tt-step text { font-family: var(--heading); font-size: 10px; fill: rgba(235, 240, 245, .55); }
.tt-step.on text { fill: #fff; }
.tt-links line { stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; }
.tt-links line.dim { opacity: .18; }
.tt-links line.next { opacity: .45; stroke-dasharray: 3 4; }
.tt-links line.lit { opacity: 1; stroke-width: 3.2; filter: drop-shadow(0 0 3px var(--c)); }
.tt-path-label { fill: var(--c); font-family: var(--heading); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 3px; }
.tt-node { cursor: pointer; outline: none; }
.tt-hit { fill: transparent; }
.tt-dot { fill: #1b2125; stroke: var(--c); stroke-width: 2.4; }
.tt-outer { fill: none; stroke: var(--c); stroke-width: 2; opacity: .55; }
.tt-core { fill: #fff8de; }
.tt-node.locked .tt-dot { stroke-opacity: .4; fill: #182024; }
.tt-node.locked .tt-outer { stroke-opacity: .3; }
.tt-node.near .tt-dot { opacity: .75; }
.tt-node.open .tt-dot { fill: #2e3a40; stroke-width: 3; animation: tt-pulse 1.6s ease-in-out infinite; }
.tt-node.learned .tt-dot { fill: var(--c); stroke: #fff3d6; stroke-width: 2; filter: drop-shadow(0 0 5px var(--c)); }
.tt-node.learned .tt-outer { opacity: 1; }
.tt-node:hover .tt-dot, .tt-node:focus-visible .tt-dot, .tt-node.selected .tt-dot { stroke: #fff; stroke-width: 3; }
.tt-node.keystone.learned .tt-dot { filter: drop-shadow(0 0 9px rgba(255, 230, 160, .95)); }
@keyframes tt-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tt-node.open .tt-dot { animation: none; } }
.tt-origin circle { fill: #3b2a52; stroke: #d6c2ff; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(190, 160, 255, .8)); }
.tt-origin text { font-family: var(--display); font-weight: 900; font-size: 18px; text-anchor: middle; fill: #fff; pointer-events: none; }
.tt-selection { fill: none; stroke: #ffd84d; stroke-width: 2.5; stroke-dasharray: 5 4; pointer-events: none; animation: fm-march 1.2s linear infinite; }
.tt-effect { margin: .4rem 0 .8rem; padding: .55rem .7rem; border-radius: 6px; font-size: 1.02rem; background: color-mix(in srgb, var(--c) 12%, transparent); border-left: 4px solid var(--c); }
.tt-effect.keystone { font-weight: 600; }
.tt-state { margin: 0 0 .6rem; color: var(--blood); font-style: italic; }
.tt-state.ok { color: var(--forest); font-style: normal; font-family: var(--heading); letter-spacing: .06em; }
.btn.tt-learn { width: 100%; justify-content: center; margin-bottom: .6rem; }
.tt-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0; font-size: .9rem; color: var(--ink-soft); }
.tt-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tt-legend i { display: inline-block; border-radius: 50%; background: #2e3a40; border: 2px solid #8a6a1c; }
.tt-legend i.minor { width: 10px; height: 10px; }
.tt-legend i.notable { width: 15px; height: 15px; }
.tt-legend i.keystone { width: 19px; height: 19px; box-shadow: 0 0 0 2px rgba(138, 106, 28, .45); }
.tt-legend i.open { width: 13px; height: 13px; border-color: #e3b41f; box-shadow: 0 0 6px #e3b41f; }
.tt-summary { margin: 0; padding-left: 1.1rem; line-height: 1.55; }

.st-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-top: .8rem; }
.st-weapon { padding: .9rem 1rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.st-weapon.wielded { border: 2px solid var(--gold-dark); box-shadow: 0 0 0 3px rgba(201, 162, 39, .2); }
.st-weapon header { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; }
.st-weapon h3 { margin: 0; color: var(--ink); text-transform: none; }
.st-weapon header p { margin: .2rem 0 0; }
.st-wlevel { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 10px; color: #f3e2b0; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold-dark); }
.st-wlevel strong { font-family: var(--display); font-size: 1.4rem; line-height: 1; color: #ffd36b; }
.st-wlevel small { font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.st-attack { display: flex; align-items: center; gap: .3rem; margin: .4rem 0; font-family: var(--heading); font-size: .85rem; color: var(--blood); }
.st-techniques { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.st-techniques li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem .45rem; border-radius: 6px; border: 1px dashed var(--line); }
.st-techniques li.unlocked { border-style: solid; background: rgba(236, 210, 126, .3); border-color: rgba(138, 106, 28, .5); }
.st-techniques li.locked { opacity: .6; }
.st-techniques strong { font-family: var(--heading); font-size: .82rem; }
.st-techniques strong small { font-family: var(--body); color: var(--blood); }
.st-techniques small, .st-techniques em { display: block; font-size: .85rem; color: var(--ink-soft); }
.st-techniques em { color: var(--blood); font-size: .78rem; }
.st-tlevel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-family: var(--heading); font-size: .8rem; color: #2b1c0f; background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a); border: 1px solid #8a6a1c; }
.st-techniques li.locked .st-tlevel { background: #cfc3ad; color: #5e4529; }
.st-table summary { cursor: pointer; font-family: var(--heading); color: var(--blood); letter-spacing: .08em; }
.st-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .3rem; margin-top: .8rem; }
.st-levels span { display: flex; justify-content: space-between; gap: .4rem; padding: .25rem .5rem; border-radius: 6px; border: 1px solid var(--line); font-size: .9rem; }
.st-levels span.current { background: rgba(236, 210, 126, .45); border-color: var(--gold-dark); }

/* ---- Kampflog: eigene Waffe ---------------------------------------------- */
.cw-head { margin: 0 0 .5rem; }
.cw-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .5rem; }
.cw-actions .btn { font-size: .7rem; }
.cw-actions .btn.locked { opacity: .5; }
.fmap-ranks tr.current td { background: rgba(236, 210, 126, .45); font-weight: 600; }
.fmap-ranks th .fmap-dot { display: inline-block; width: 9px; height: 9px; margin-right: .3rem; border-radius: 50%; vertical-align: 0; }
.fmap-ranks td, .fmap-ranks th { white-space: nowrap; }
.quest-hero .member-rank { display: block; font-size: .72rem; color: var(--ink-soft); font-style: italic; line-height: 1; }
.faction.secret .quest-hero .member-rank { color: #b9a682; }
.fmap-yields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 1.6rem; }

/* ---- Seltenheit ---------------------------------------------------------- */
:root { --r-selten: #2f7fd6; --r-episch: #9246d0; --r-legendaer: #e3870f; }
.tag.rarity { color: #fff; border-color: rgba(0, 0, 0, .25); text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.tag.r-selten { background: var(--r-selten); }
.tag.r-episch { background: var(--r-episch); }
.tag.r-legendaer { background: linear-gradient(90deg, #e3870f, #f2c14e); }
.rarity-text.r-selten { color: var(--r-selten); font-weight: 600; }
.rarity-text.r-episch { color: var(--r-episch); font-weight: 600; }
.rarity-text.r-legendaer { color: var(--r-legendaer); font-weight: 600; }
.bag-item.r-selten, .ware.r-selten { border-color: var(--r-selten); box-shadow: 0 0 0 1px var(--r-selten), 0 0 10px rgba(47, 127, 214, .3); }
.bag-item.r-episch, .ware.r-episch { border-color: var(--r-episch); box-shadow: 0 0 0 1px var(--r-episch), 0 0 12px rgba(146, 70, 208, .35); }
.bag-item.r-legendaer, .ware.r-legendaer { border-color: var(--r-legendaer); box-shadow: 0 0 0 2px var(--r-legendaer), 0 0 18px rgba(227, 135, 15, .55); }
.bag-item.r-selten h3, .ware.r-selten h3 { color: #1f5ea8; }
.bag-item.r-episch h3, .ware.r-episch h3 { color: #6e2aa6; }
.bag-item.r-legendaer h3, .ware.r-legendaer h3 { color: #b0610a; }
.slot.filled.r-selten { border-color: var(--r-selten); box-shadow: inset 0 0 0 1px var(--r-selten); }
.slot.filled.r-episch { border-color: var(--r-episch); box-shadow: inset 0 0 0 1px var(--r-episch), 0 0 10px rgba(146, 70, 208, .3); }
.slot.filled.r-legendaer { border-color: var(--r-legendaer); box-shadow: inset 0 0 0 1px var(--r-legendaer), 0 0 14px rgba(227, 135, 15, .5); }
.slot.filled.r-selten .slot-item { color: #1f5ea8; }
.slot.filled.r-episch .slot-item { color: #6e2aa6; }
.slot.filled.r-legendaer .slot-item { color: #b0610a; }
.vault-slot.filled.r-episch { border-color: var(--r-episch); }
.vault-slot.filled.r-legendaer { border-color: var(--r-legendaer); }
.tag.set-tag { background: #2b1c0f; color: var(--gold-light); }
.item-bonus { list-style: none; margin: .3rem 0; padding: 0; font-size: .9rem; color: #2f6b38; }
.set-bonus { display: grid; gap: .5rem; margin: .8rem 0 .2rem; }
.set-bonus > div { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(146, 70, 208, .1); border: 1px solid rgba(146, 70, 208, .45); }
.set-bonus strong { font-family: var(--heading); color: #6e2aa6; }
.set-bonus span { font-size: .92rem; }
.set-bonus span.off { opacity: .5; }
.bonus-fields summary { cursor: pointer; font-family: var(--heading); font-size: .8rem; color: var(--blood); margin: .4rem 0; }
.armory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.armory-set { padding: .8rem .9rem; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--faction) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--faction) 14%, transparent), rgba(255, 250, 235, .55)); }
.armory-set header { display: flex; gap: .7rem; align-items: center; }
.armory-set h3 { margin: 0; color: #6e2aa6; text-transform: none; }
.armory-set header p { margin: .1rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.armory-bonus { margin: .5rem 0; padding-left: 1.1rem; font-size: .92rem; }
.armory-pieces { display: grid; gap: .35rem; }
.armory-piece { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: 6px; background: rgba(255, 250, 235, .75); border: 1px solid var(--r-episch); }
.armory-piece small { display: block; font-size: .82rem; color: var(--ink-soft); }
.armory-blocked { margin: .5rem 0 0; font-size: .88rem; font-style: italic; color: var(--blood); }

/* ---- Handwerk -------------------------------------------------------------- */
.craft-done { color: var(--forest); font-style: italic; }
.materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.material { display: flex; align-items: baseline; gap: .4rem; padding: .35rem .55rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.material strong { font-family: var(--heading); font-size: 1.15rem; color: var(--blood); }
.material.none { opacity: .55; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.recipe { padding: .7rem .8rem; border-radius: 8px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.recipe header { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.recipe h3 { margin: 0; text-transform: none; color: var(--ink); }
.recipe.ready { border-color: var(--forest); box-shadow: 0 0 0 1px rgba(46, 99, 52, .35); }
.recipe.r-episch h3 { color: #6e2aa6; }
.recipe.r-legendaer { border-color: var(--r-legendaer); }
.recipe.r-legendaer h3 { color: #b0610a; }
.recipe.r-selten h3 { color: #1f5ea8; }
.ingredients { list-style: none; margin: .5rem 0; padding: 0; font-size: .95rem; }
.ingredients li { display: flex; justify-content: space-between; padding: .15rem 0; border-bottom: 1px dashed var(--line); }
.ingredients li.ok b { color: var(--forest); }
.ingredients li.missing b { color: var(--blood); }

/* ---- Fraktionskriege ---------------------------------------------------------- */
.fm-war { fill: rgba(190, 20, 10, .18); stroke: #ff3b2a; stroke-width: 3; animation: fm-war 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes fm-war { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .fm-war { animation: none; } }
.fm-war-icon circle { fill: #7e1a14; stroke: #ffd2a0; stroke-width: 1.4; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
.fm-war-icon path { stroke: #fff1d6; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
.war { padding: .8rem .9rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.war.active { border: 2px solid #b3261e; background: linear-gradient(180deg, rgba(179, 38, 30, .1), rgba(255, 250, 235, .7)); }
.war header { display: flex; gap: .6rem; align-items: center; }
.war header > div { flex: 1; }
.war h3 { margin: 0; text-transform: none; color: var(--ink); }
.war header p { margin: .1rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.war-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff1d6; background: #7e1a14; font-size: 1.1rem; }
.war-bar { height: 18px; }
.war-gm { display: grid; gap: .4rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--line); }

/* ---- Erfolge --------------------------------------------------------------- */
.badge-medal {
  --m1: #f0c48f; --m2: #a8662a; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #2b1c0f;
  background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2)); border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35);
}
.badge-medal .icon { width: 1.5rem; height: 1.5rem; }
.badge-medal.small { width: 2rem; height: 2rem; }
.badge-medal.small .icon { width: 1rem; height: 1rem; }
.badge-medal.t-silber { --m1: #f4f6f8; --m2: #8d979f; }
.badge-medal.t-gold { --m1: #fff1b8; --m2: #c99a1e; }
.badge-medal.t-legende { --m1: #f1d2ff; --m2: #7d2fb8; color: #fff6dc; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 14px rgba(160, 80, 220, .7); }
.badge-medal.locked { filter: grayscale(1) brightness(.85); opacity: .45; }
.ach-people { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.ach-people a { display: inline-flex; gap: .4rem; align-items: center; padding: .25rem .7rem; border-radius: 99px; text-decoration: none; font-family: var(--heading); font-size: .78rem; color: var(--parchment-light); background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .35); }
.ach-people a.active { background: var(--gold); color: #2b1c0f; }
.ach-people b { padding: 0 .35rem; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.ach-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin-bottom: 1.2rem; padding: 1rem 1.3rem; border-radius: 8px; color: var(--parchment-light); background: var(--noise), radial-gradient(ellipse at 20% 0, #4a2e14, #1d130b 75%); border: 1px solid var(--gold-dark); box-shadow: var(--shadow); }
.ach-total strong { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #ffd36b; }
.ach-total span { font-family: var(--heading); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.ach-progress p { margin: .2rem 0 0; color: #cdb894; font-style: italic; }
.ach-tiers { display: flex; flex-wrap: wrap; gap: .7rem; }
.ach-tier { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.ach-tier b { font-family: var(--heading); font-size: 1.1rem; color: #fff1c4; }
@media (max-width: 760px) { .ach-summary { grid-template-columns: 1fr; } }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; }
.ach { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 8px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.ach.done { background: linear-gradient(180deg, #fff6d6, #f3e2b0); border-color: var(--gold-dark); }
.ach h3 { margin: 0; font-size: .95rem; text-transform: none; color: var(--ink); }
.ach p { margin: .15rem 0; font-size: .92rem; }
.ach-tiername { margin-left: .4rem; font-family: var(--heading); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #a8662a; }
.ach-tiername.t-silber { color: #6c757d; }
.ach-tiername.t-gold { color: #a17a14; }
.ach-tiername.t-legende { color: #7d2fb8; }
.ach-date { color: var(--forest); font-size: .85rem; font-style: italic; }
.ach-bar { display: flex; align-items: center; gap: .5rem; }
.ach-bar .st-xp { flex: 1; }
.ach-bar small { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.ach-strip { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem; padding: .5rem .9rem; border-radius: 8px; text-decoration: none; color: var(--parchment-light); background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .35); }
.ach-strip:hover { border-color: var(--gold); }
.ach-strip-label { font-family: var(--heading); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.ach-strip strong { font-family: var(--heading); color: #ffd36b; }
.ach-strip-badges { display: flex; gap: .3rem; flex: 1; }
.ach-strip-more { font-size: .9rem; font-style: italic; color: var(--parchment-dark); }

/* ---- Spielabend, Weltlexikon, Beute ------------------------------------------------ */
.ses-toolbar, .ses-reward { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.ses-reward span { font-family: var(--heading); font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft); }
.ses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.ses-hero { padding: .8rem .9rem; border-radius: 8px; background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); box-shadow: var(--shadow); }
.ses-hero.picked { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.ses-hero.dead { filter: grayscale(.7); opacity: .8; }
.ses-hero header { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.ses-name { flex: 1; min-width: 0; }
.ses-name strong { display: block; font-family: var(--heading); }
.ses-name small { color: var(--ink-soft); }
.ses-ini { display: flex; flex-direction: column; align-items: center; font-family: var(--heading); font-size: .62rem; letter-spacing: .1em; color: var(--ink-soft); }
.ses-ini input { width: 3.2rem; text-align: center; }
.ses-dead { margin: 0 0 .4rem; color: var(--blood); font-family: var(--heading); }
.ses-buttons, .ses-custom, .ses-pool { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .3rem 0; }
.ses-custom input { width: 4rem; }
.ses-pool span { min-width: 6.5rem; font-size: .9rem; }
.ses-meta { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.lore-search input[type=search] { width: 100%; margin-bottom: .5rem; }
.lore-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.chip-btn { display: inline-flex; gap: .35rem; align-items: center; padding: .2rem .6rem; border-radius: 99px; cursor: pointer; font-family: var(--heading); font-size: .72rem; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.chip-btn.active { background: var(--blood); color: #fff3d6; border-color: var(--blood); }
.chip-btn b { font-size: .68rem; opacity: .75; }
.lore-list { display: grid; gap: .5rem; }
.lore-entry { padding: .5rem .7rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.lore-entry.secret { border-style: dashed; background: rgba(126, 26, 20, .06); }
.lore-entry summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.lore-entry summary strong { font-family: var(--heading); flex: 1; }
.lore-content p { margin: .5rem 0; line-height: 1.55; }
.loot { margin: .4rem 0; font-size: .92rem; }
.loot summary { cursor: pointer; font-family: var(--heading); font-size: .75rem; color: var(--blood); }
.loot ul { margin: .3rem 0; padding-left: 1.1rem; }
.loot-form { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .3rem 0; }
.loot-form select { max-width: 12rem; }
.loot-form .mini { width: 3.6rem; }
.ses-name strong { font-size: .92rem; line-height: 1.2; overflow-wrap: anywhere; }
.ses-ini { flex: none; }

/* ---- Inventar: kompaktes Gepäck ------------------------------------------------ */
.slot-open { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.slot-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.bag-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .9rem; }
.bag-tools input[type=search] { flex: 1 1 12rem; min-width: 0; }
.bag-tools select { flex: 0 1 auto; }
.segmented { display: inline-flex; border: 1px solid var(--gold-dark); border-radius: 99px; overflow: hidden; }
.segmented .seg { padding: .35rem .8rem; border: 0; cursor: pointer; font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(255, 250, 235, .7); }
.segmented .seg.active { color: #fff3d6; background: var(--blood); }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .55rem; }
.bag-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-height: 112px; padding: .7rem .4rem .5rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: center; border-radius: 8px;
  background: radial-gradient(circle at 50% 30%, #fffaf0, #efe0bc); border: 1px solid rgba(110, 78, 38, .4); box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  transition: transform .12s, box-shadow .12s;
}
.bag-tile:hover, .bag-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, .2); outline: none; }
.bag-tile .bag-icon { width: 2.6rem; height: 2.6rem; }
.tile-name { font-family: var(--heading); font-size: .72rem; line-height: 1.2; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-qty { position: absolute; top: .3rem; right: .35rem; min-width: 1.4rem; padding: 0 .3rem; border-radius: 99px; font-family: var(--heading); font-size: .7rem; color: #fff3d6; background: var(--blood); }
.tile-mark { position: absolute; top: .3rem; left: .4rem; font-size: .8rem; color: #b3241c; }
.tile-mark.effect-asp { color: #2c5bb0; }
.tile-mark.effect-kap { color: #c99a1e; }
.bag-tile.r-selten { border: 2px solid var(--r-selten); }
.bag-tile.r-episch { border: 2px solid var(--r-episch); box-shadow: 0 0 10px rgba(146, 70, 208, .35); }
.bag-tile.r-legendaer { border: 2px solid var(--r-legendaer); box-shadow: 0 0 14px rgba(227, 135, 15, .55); }
.bag-tile.r-selten .tile-name { color: #1f5ea8; }
.bag-tile.r-episch .tile-name { color: #6e2aa6; }
.bag-tile.r-legendaer .tile-name { color: #b0610a; }
.bag-list { display: grid; gap: .3rem; }
.bag-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .7rem; align-items: center; width: 100%; padding: .4rem .6rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: left; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line);
  border-left: 4px solid rgba(110, 78, 38, .35);
}
.bag-row:hover, .bag-row:focus-visible { background: #fff8e4; outline: none; }
.bag-row .bag-icon { width: 2rem; height: 2rem; }
.row-name { display: flex; flex-direction: column; min-width: 0; }
.row-name small { color: var(--ink-soft); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-weight { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.row-qty { font-family: var(--heading); color: var(--blood); }
.bag-row.r-selten { border-left-color: var(--r-selten); }
.bag-row.r-episch { border-left-color: var(--r-episch); }
.bag-row.r-legendaer { border-left-color: var(--r-legendaer); }
.bag-row.r-selten strong { color: #1f5ea8; }
.bag-row.r-episch strong { color: #6e2aa6; }
.bag-row.r-legendaer strong { color: #b0610a; }
@media (max-width: 600px) { .bag-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .row-weight { display: none; } }
.item-detail { padding: .6rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 250, 235, .6); margin-bottom: .7rem; }
.item-detail.r-selten { border: 2px solid var(--r-selten); }
.item-detail.r-episch { border: 2px solid var(--r-episch); }
.item-detail.r-legendaer { border: 2px solid var(--r-legendaer); box-shadow: 0 0 12px rgba(227, 135, 15, .4); }
.item-detail-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .4rem; }
.bag-icon.big { width: 3rem; height: 3rem; }
.item-detail-meta { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.item-effect { margin: .3rem 0; font-weight: 600; }
.item-primary { margin-bottom: .6rem; }
.item-more { margin: .35rem 0; }
.item-more summary { cursor: pointer; font-family: var(--heading); font-size: .78rem; letter-spacing: .05em; color: var(--blood); }
.item-more .inline-form { margin-top: .4rem; }

/* ---- Handy-Navigation: fünf feste Reiter + „Mehr“ -------------------------------- */
.mainnav { position: relative; }
.nav-more, .nav-more-panel { display: none; }
@media (max-width: 640px) {
  .mainnav { grid-template-columns: repeat(7, 1fr); }
  .mainnav > a.secondary { display: none; }
  .nav-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .4rem .1rem; cursor: pointer;
    font-family: var(--heading); font-weight: 700; font-size: .54rem; letter-spacing: .02em; text-transform: uppercase;
    color: var(--parchment-dark); background: rgba(0, 0, 0, .2); border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px;
  }
  .nav-more .icon { width: 1.35rem; height: 1.35rem; }
  .nav-more.active { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold); }
  .nav-more-panel:not([hidden]) {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; position: absolute; z-index: 40; top: 100%; left: .4rem; right: .4rem;
    padding: .5rem; border-radius: 0 0 10px 10px; background: var(--noise), linear-gradient(180deg, #2b1c0f, #1a110a); border: 1px solid var(--gold-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  }
  .nav-more-panel a { display: flex !important; }
}

/* ---- Glocke: Filter und „Alle gelesen“ -------------------------------------------- */
.notif-panel { width: min(420px, calc(100vw - 1.5rem)); }
.userbox .notif-panel button.notif-read, .userbox .notif-panel button.notif-chip {
  width: auto; height: auto; border-radius: 99px; display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--heading); font-size: .66rem; letter-spacing: .04em; cursor: pointer;
}
.userbox .notif-panel button.notif-read { padding: .2rem .6rem; color: #fff3d6; background: var(--forest); border: 1px solid #1f4423; }
.notif-filters { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 .5rem; }
.userbox .notif-panel button.notif-chip { padding: .18rem .55rem; color: var(--ink); background: rgba(255, 250, 235, .8); border: 1px solid var(--line); }
.userbox .notif-panel button.notif-chip.active { color: #fff3d6; background: var(--blood); border-color: var(--blood); }
.notif-chip b { min-width: 1.1rem; padding: 0 .25rem; border-radius: 99px; color: #fff; background: var(--blood-light); font-size: .62rem; text-align: center; }
.notif-chip.active b { background: rgba(255, 255, 255, .25); }
.userbox .notif-panel a.notif-trade { display: block; margin: .2rem 0 .4rem; padding: .25rem .5rem; border-radius: 6px; background: rgba(236, 210, 126, .4); text-decoration: none; font-size: .9rem; }
.notif-panel li { border-left: 3px solid transparent; }
.notif-panel li.cat-kampf { border-left-color: #b3241c; }
.notif-panel li.cat-handel { border-left-color: #c99a1e; }
.notif-panel li.cat-fraktion { border-left-color: #2c5bb8; }
.notif-panel li.cat-erfolge { border-left-color: #9246d0; }
.notif-panel li.cat-abenteuer { border-left-color: #2f8a43; }
.notif-panel li.unread { background: rgba(236, 210, 126, .35); font-weight: 600; }
.bag-tools input[type=search], .bag-tools select { width: auto; margin: 0; }
.bag-tools input[type=search] { flex: 1 1 14rem; }

/* ---- Zweites Ich: lila Inventar --------------------------------------------------- */
:root { --alter: #7a3fb8; --alter-dark: #3d1c63; --alter-light: #e6d4fb; }
.persona-banner { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 8px; color: var(--ink); background: rgba(255, 244, 210, .85); border: 1px solid var(--gold-dark); }
.persona-banner.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #5b2a8c); border-color: #b48ae6; box-shadow: 0 0 22px rgba(146, 70, 208, .45); }
.persona-banner strong { font-family: var(--heading); letter-spacing: .04em; }
.persona-banner p { margin: .15rem 0 0; font-size: .95rem; font-style: italic; }
.persona-mask { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.4rem; background: radial-gradient(circle at 35% 30%, #fff1b8, #d9aa3a); color: #5c3d06; }
.persona-banner.alter .persona-mask { background: radial-gradient(circle at 35% 30%, #e6d4fb, #7a3fb8); color: #fff; box-shadow: 0 0 12px rgba(200, 160, 255, .8); }
.persona-line { margin: .3rem 0 0; font-family: var(--heading); font-size: .85rem; letter-spacing: .06em; color: #c9a6f2; text-shadow: 0 0 8px rgba(146, 70, 208, .8); }

/* Hat das zweite Ich die Kontrolle, färbt sich das ganze Inventar lila. */
#app.persona-alter .card:not(.vault-card):not(.persona-stash) {
  background: var(--noise), linear-gradient(180deg, #f1e6ff, #dcc6f5);
  border-color: var(--alter);
  box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), 0 0 26px rgba(122, 63, 184, .35), var(--shadow);
}
#app.persona-alter .card:not(.vault-card):not(.persona-stash) h2 { color: var(--alter-dark); }
#app.persona-alter .vault-card h2 { color: #d9bcff; }
#app.persona-alter .card h2::after { filter: hue-rotate(250deg) saturate(1.4); }
#app.persona-alter .slot.filled, #app.persona-alter .slot.empty { background: rgba(250, 244, 255, .8); border-color: rgba(122, 63, 184, .45); }
#app.persona-alter .slot.filled .slot-icon { background: radial-gradient(circle at 35% 30%, #a86ee6, #3d1c63); border-color: #c9a6f2; }
#app.persona-alter .doll-figure g { stroke: #b48ae6; }
#app.persona-alter .card:not(.persona-stash) .bag-tile { background: radial-gradient(circle at 50% 30%, #fbf7ff, #e3d1f7); border-color: rgba(122, 63, 184, .5); }
#app.persona-alter .bag-row { background: rgba(250, 244, 255, .85); border-color: rgba(122, 63, 184, .35); }
#app.persona-alter .card:not(.persona-stash) .bag-icon { background: linear-gradient(180deg, #8a4fcc, #3d1c63); }
#app.persona-alter .chips a.active, #app.persona-alter .segmented .seg.active { background: var(--alter); border-color: var(--alter); color: #fff; }
#app.persona-alter .segmented { border-color: var(--alter); }
#app.persona-alter .doll-stats div { background: linear-gradient(180deg, #7a3fb8, #3d1c63); }
#app.persona-alter .vault-card { border-color: #b48ae6; box-shadow: 0 0 22px rgba(122, 63, 184, .4); }
#app.persona-alter .tabs a.active { background: linear-gradient(180deg, #c9a6f2, #7a3fb8); color: #fff; }

/* Ruhendes Gepäck: lila, wenn es dem zweiten Ich gehört */
.persona-stash .bag-tile.locked { cursor: default; opacity: .75; filter: saturate(.7); }
.persona-stash .bag-tile.locked:hover { transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.persona-stash.alter { background: var(--noise), linear-gradient(180deg, #efe2ff, #d8c0f3); border-color: var(--alter); box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), var(--shadow); }
.persona-stash.alter h2 { color: var(--alter-dark); }
.persona-stash.alter .bag-tile { background: radial-gradient(circle at 50% 30%, #fbf7ff, #e3d1f7); border-color: rgba(122, 63, 184, .5); }
.persona-stash.alter .bag-icon { background: linear-gradient(180deg, #8a4fcc, #3d1c63); }
.tile-mark.worn { left: auto; right: .35rem; top: auto; bottom: .3rem; font-size: .7rem; color: var(--ink-soft); }

.persona-switch { margin-top: .6rem; padding: .7rem .9rem; border-radius: 8px; text-align: center; background: rgba(255, 244, 210, .9); border: 1px solid var(--gold-dark); animation: persona-in .6s ease-out; }
.persona-switch.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #6a35a3); border-color: #b48ae6; box-shadow: 0 0 24px rgba(146, 70, 208, .6); }
.persona-switch strong { font-family: var(--heading); font-size: 1.1rem; letter-spacing: .05em; }
.persona-switch p { margin: .2rem 0 0; font-style: italic; }
@keyframes persona-in { from { opacity: 0; transform: scale(.92); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .persona-switch { animation: none; } }
.persona-gm.alter { border-color: var(--alter); box-shadow: 0 0 0 1px rgba(122, 63, 184, .5), 0 0 22px rgba(122, 63, 184, .3), var(--shadow); }
.persona-gm h2 { color: var(--alter-dark); }
.persona-gm-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(122, 63, 184, .1); }
.ses-persona { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .2rem 0 .4rem; padding: .25rem .5rem; border-radius: 6px; font-size: .9rem; background: rgba(255, 244, 210, .7); }
.ses-persona.alter { color: #f5ecff; background: linear-gradient(135deg, #2c1147, #5b2a8c); }
.ses-persona span { flex: 1; font-family: var(--heading); font-size: .8rem; }

/* ---- Beute im Kampf, Truhen -------------------------------------------------------- */
.hp-hidden { display: flex; justify-content: space-between; margin-top: .3rem; padding: .3rem .5rem; border-radius: 6px; font-family: var(--heading); font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft); background: repeating-linear-gradient(135deg, rgba(110, 78, 38, .12) 0 6px, transparent 6px 12px); border: 1px dashed var(--line); }
.fighter-loot { margin: .3rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.combat-settings { display: grid; gap: .25rem; margin-top: .6rem; font-size: .95rem; }
.creature-form .drop-pick { margin: .3rem 0 .8rem; }
.drop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .8rem; font-size: .92rem; }
.loot-rows { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.loot-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 6px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.loot-rows .rarity-text { flex: 1; font-weight: 600; }
.loot-chance { font-family: var(--heading); color: var(--blood); }
.btn.chest-btn { background: linear-gradient(180deg, #c99a1e, #7d5c12); color: #fff8e0; }
.chest-result { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: 1.05rem; }
.chest-result li { padding: .4rem .6rem; border-radius: 6px; background: rgba(236, 210, 126, .35); border: 1px solid var(--gold-dark); animation: persona-in .5s ease-out both; }
.chest-result li:nth-child(2) { animation-delay: .1s; } .chest-result li:nth-child(3) { animation-delay: .2s; } .chest-result li:nth-child(4) { animation-delay: .3s; }
.tile-mark.chest { left: .4rem; color: #8a6a1c; }
.rarity-text.r-gewoehnlich { color: var(--ink); }
.drop-list { grid-template-columns: 1fr; gap: .15rem; }
.drop-list .check { display: flex; gap: .4rem; align-items: baseline; }
.fighter-head .btn.tiny .icon, .fighter-loot .icon { width: .9rem; height: .9rem; vertical-align: -2px; }

/* ---- Wanderhändler ---------------------------------------------------------------- */
.shop-head {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; margin: 0 0 1.2rem; padding: 1rem 1.3rem; border-radius: 10px;
  color: var(--parchment-light); background: var(--noise), radial-gradient(ellipse at 10% 0, #5a3a16, #1d130b 75%);
  border: 1px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 0 3px rgba(201, 162, 39, .15);
}
.shop-head h2 { margin: 0; color: var(--gold-light); }
.shop-head p { margin: .2rem 0 0; font-style: italic; color: #e2cfa8; }
.shop-timer { display: flex; flex-direction: column; align-items: center; padding: .4rem .9rem; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .45); }
.shop-timer small { font-family: var(--heading); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.shop-clock { font-family: var(--heading); font-size: 1.6rem; font-variant-numeric: tabular-nums; color: #ffd36b; text-shadow: 0 0 10px rgba(255, 200, 80, .5); }
@media (max-width: 700px) { .shop-head { grid-template-columns: 1fr; text-align: center; } }

.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr; } }
.shop-slot {
  --rc: #8a6a1c;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; min-height: 300px; padding: 1.3rem 1rem 1rem;
  cursor: pointer; font: inherit; color: var(--ink); text-align: center; border-radius: 12px; overflow: hidden;
  background: var(--noise), radial-gradient(circle at 50% 32%, #fffaf0 0, #f1e1bb 55%, #dcc591 100%);
  border: 2px solid var(--rc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .15s, box-shadow .15s;
}
.shop-slot:hover, .shop-slot:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--rc) 70%, transparent), 0 14px 26px rgba(0, 0, 0, .4); outline: none; }
.shop-slot.r-selten { --rc: var(--r-selten); }
.shop-slot.r-episch { --rc: var(--r-episch); background: var(--noise), radial-gradient(circle at 50% 32%, #fbf6ff 0, #eadbf9 55%, #d6bdef 100%); }
.shop-slot.r-legendaer { --rc: var(--r-legendaer); background: var(--noise), radial-gradient(circle at 50% 32%, #fffbea 0, #fbe2a6 55%, #eec06a 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 22px rgba(227, 135, 15, .55), 0 8px 18px rgba(0, 0, 0, .35); }
.shop-slot.sold { filter: grayscale(.8); opacity: .65; }
.shop-kind { font-family: var(--heading); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.shop-icon { display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: .3rem 0; border-radius: 50%; color: #f8e7b6; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 75%, #fff), color-mix(in srgb, var(--rc) 80%, #000)); border: 3px solid var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 -6px 12px rgba(0, 0, 0, .3); }
.shop-icon .icon { width: 3rem; height: 3rem; }
.shop-icon.big { width: 4.2rem; height: 4.2rem; flex: none; --rc: inherit; }
.shop-icon.big .icon { width: 2.1rem; height: 2.1rem; }
.shop-name { font-family: var(--heading); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.shop-slot.r-selten .shop-name { color: #1f5ea8; }
.shop-slot.r-episch .shop-name { color: #6e2aa6; }
.shop-slot.r-legendaer .shop-name { color: #9a520a; }
.shop-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.shop-price { margin-top: auto; font-size: 1.2rem; }
.shop-price s, .shop-buy s { margin-right: .35rem; color: var(--ink-soft); font-size: .85em; }
.shop-stock { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.shop-ribbon { position: absolute; top: 14px; right: -34px; padding: .2rem 2.6rem; transform: rotate(35deg); font-family: var(--heading); font-weight: 700; font-size: .78rem; color: #fff3d6; background: linear-gradient(180deg, #b3261e, #7e1a14); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

.dialog.shop-dialog { max-width: min(640px, calc(100vw - 2rem)); }
.dialog.shop-dialog.r-selten { box-shadow: 0 0 0 2px var(--r-selten), 0 20px 60px rgba(0, 0, 0, .6); }
.dialog.shop-dialog.r-episch { box-shadow: 0 0 0 2px var(--r-episch), 0 0 30px rgba(146, 70, 208, .45), 0 20px 60px rgba(0, 0, 0, .6); }
.dialog.shop-dialog.r-legendaer { box-shadow: 0 0 0 2px var(--r-legendaer), 0 0 36px rgba(227, 135, 15, .55), 0 20px 60px rgba(0, 0, 0, .6); }
.shop-detail-head { --rc: #8a6a1c; display: flex; gap: .9rem; align-items: center; margin-bottom: .6rem; }
.shop-detail-head.r-selten { --rc: var(--r-selten); }
.shop-detail-head.r-episch { --rc: var(--r-episch); }
.shop-detail-head.r-legendaer { --rc: var(--r-legendaer); }
.shop-detail-head .desc { margin: .4rem 0 0; }
.shop-section { margin: .9rem 0; }
.shop-section h3 { display: flex; align-items: center; gap: .35rem; margin: .2rem 0 .5rem; font-size: .85rem; letter-spacing: .1em; color: var(--blood); }
.shop-damage { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.shop-damage div { display: flex; flex-direction: column; align-items: center; padding: .5rem; border-radius: 8px; background: linear-gradient(180deg, #8e1b18, #5a100b); color: #fff3d6; border: 1px solid var(--gold-dark); }
.shop-damage small { font-family: var(--heading); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.shop-damage strong { font-family: var(--heading); font-size: 1.2rem; }
.shop-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0; }
.shop-facts dt { font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: .15rem; }
.shop-facts dd { margin: 0; }
.shop-compare { margin: .6rem 0; padding: .45rem .7rem; border-radius: 6px; background: rgba(110, 78, 38, .1); }
.shop-compare.up { background: rgba(46, 99, 52, .14); color: #1f4423; }
.shop-compare.down { background: rgba(126, 26, 20, .1); color: var(--blood); }
.shop-chest { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.shop-chest li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.shop-buy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 1.2rem; }
.shop-buy small { font-size: .82rem; color: var(--ink-soft); }
.dialog.shop-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ---- Kampfbühne ------------------------------------------------------------ */
.arena {
  position: relative; margin: 0 0 1.2rem; padding: .9rem 1rem 1rem; border-radius: 12px; overflow: hidden; color: #f1e3bf;
  background:
    radial-gradient(ellipse 70% 40% at 50% 92%, rgba(201, 120, 39, .22), transparent 70%),
    radial-gradient(ellipse 50% 60% at 18% 30%, rgba(70, 110, 170, .16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 30%, rgba(170, 40, 30, .2), transparent 70%),
    linear-gradient(180deg, #1b130d 0%, #120c08 60%, #24170c 100%);
  border: 2px solid var(--gold-dark); box-shadow: var(--shadow), inset 0 0 60px rgba(0, 0, 0, .6);
}
.arena::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 3.2rem; height: 40%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(120, 82, 40, .28), transparent 70%); pointer-events: none; }
.arena > * { position: relative; z-index: 1; }
.arena.over .arena-stage { filter: saturate(.75); }
.arena-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.arena-round { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle, #3a2614, #140d08); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(201, 162, 39, .35); }
.arena-round small { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; }
.arena-round strong { font-family: var(--display); font-size: 1.3rem; line-height: 1; color: #ffd36b; }
.arena-ticker { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; font-size: .9rem; }
.arena-ticker .entry { padding: .1rem 0; border: 0; background: none; color: #e9d8ae; }
.arena-ticker .entry:not(:first-child) { opacity: .55; font-size: .82rem; }
.arena-ticker .entry-icon { color: var(--gold); }
.arena-ticker .entry strong { color: #fff0c4; }
.arena-ticker .entry.system { justify-content: flex-start; font-family: var(--body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: #f3d67a; font-style: italic; }
.arena-ticker .dmg { color: #ff8a77; }
.arena-ticker .heal { color: #8fe38a; }
.arena-ticker .entry-icon { flex: none; }
.arena-xp { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 99px; font-family: var(--heading); font-size: .75rem; color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); }
.arena-xp .icon { width: 14px; height: 14px; }

.arena-field { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .6rem; }
.arena-vs { align-self: center; }
.arena-side h3 { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .5rem; font-family: var(--heading); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.arena-side.foes h3 { justify-content: flex-end; color: #f0a497; }
.arena-side h3 small { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: .8rem; color: #b9a57a; }
.arena-tokens { display: flex; flex-wrap: wrap; gap: .7rem; }
.arena-side.foes .arena-tokens { justify-content: flex-end; }
.arena-empty { margin: 0; color: #9c8a66; font-style: italic; }
.arena-vs span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; font-family: var(--display); font-size: .8rem; color: #ffd36b; background: #1d130b; border: 1px solid var(--gold-dark); box-shadow: 0 0 18px rgba(201, 62, 39, .4); }

.token {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 8.2rem; padding: .55rem .45rem .5rem;
  border-radius: 12px; cursor: pointer; font: inherit; color: inherit; text-align: center;
  background: linear-gradient(180deg, rgba(255, 240, 200, .07), rgba(0, 0, 0, .25)); border: 1px solid rgba(201, 162, 39, .35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.token:hover { transform: translateY(-2px); border-color: var(--gold); }
.token:focus-visible { outline: 2px solid #ffd36b; outline-offset: 2px; }
.token.selected { border: 2px solid #ffd36b; box-shadow: 0 0 0 3px rgba(255, 211, 107, .18), 0 0 22px rgba(255, 211, 107, .35); }
.token.foes.selected { border-color: #ff7a66; box-shadow: 0 0 0 3px rgba(255, 122, 102, .2), 0 0 22px rgba(255, 90, 70, .45); }
.token.me { background: linear-gradient(180deg, rgba(243, 214, 122, .18), rgba(0, 0, 0, .25)); }
.token-ini { position: absolute; top: .3rem; left: .35rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .25rem; display: grid; place-items: center; border-radius: 99px; font-size: .72rem; font-weight: 700; color: #1d130b; background: var(--gold-light); }
.token-me { position: absolute; top: .3rem; right: .35rem; padding: .05rem .4rem; border-radius: 99px; font-family: var(--heading); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #1d130b; background: #8fd18a; }
.token-art { display: grid; place-items: center; width: 5.4rem; height: 5.4rem; }
.token-art .portrait-lg { width: 5rem; height: 5rem; }
.token-art .portrait-lg .portrait-initial { font-size: 2.2rem; }
.token.foes.hero .token-art .portrait { border-color: #b3241c; }
.token-name { font-family: var(--heading); font-size: .78rem; line-height: 1.2; color: #fff0c4; overflow-wrap: anywhere; }
.token-hp { position: relative; display: block; width: 100%; height: 1rem; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .6); border: 1px solid rgba(201, 162, 39, .4); }
.token-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5fc35a, #2f7a3d); transition: width .5s ease; }
.token-hp.mid i { background: linear-gradient(180deg, #f0c64a, #b8871a); }
.token-hp.low i { background: linear-gradient(180deg, #ff6b57, #a3241d); }
.token-hp em { position: relative; display: block; font-style: normal; font-size: .68rem; line-height: 1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.token-hp.hidden { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .6) 0 6px, rgba(60, 40, 20, .6) 6px 12px); }
.token.down { opacity: .55; }
.token.down .token-art { filter: grayscale(1) brightness(.6); transform: rotate(-8deg); }
.token-down { position: absolute; top: 2.1rem; left: 50%; transform: translateX(-50%); color: #ff8a77; }
.token-down .icon { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0 6px #000); }
.token-float { position: absolute; top: 1.6rem; left: 50%; font-family: var(--display); font-size: 1.6rem; font-weight: 900; pointer-events: none; text-shadow: 0 2px 4px #000, 0 0 12px currentColor; animation: token-float 2.6s ease-out forwards; }
.token-float.dmg { color: #ff6b57; }
.token-float.heal { color: #8fe38a; }
@keyframes token-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } }
.token.hit { animation: token-shake .45s ease; }
@keyframes token-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .token-float { animation-duration: .01s; opacity: 1; } .token, .token-hp i { transition: none; } }

/* Gestalten */
.creature-art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.creature-art .cr-body, .creature-art .cr-wing { fill: #0b0705; stroke: rgba(201, 162, 39, .55); stroke-width: 1.2; }
.creature-art .cr-wing { fill: #1d0f0c; }
.creature-art .cr-shade { fill: #000; }
.creature-art .cr-bone { fill: #e9dcc0; stroke: #6b5a3e; stroke-width: 1.2; }
.creature-art .cr-line { fill: none; stroke: #c7b48a; stroke-width: 3; stroke-linecap: round; }
.creature-art .cr-line.bone { stroke: #e9dcc0; stroke-width: 3.2; }
.creature-art .cr-line.thick { stroke: #0b0705; stroke-width: 5; }
.creature-art.cr-spinne .cr-line.thick { stroke: #0b0705; stroke-width: 4; filter: drop-shadow(0 0 1px rgba(201, 162, 39, .6)); }
.creature-art .cr-tusk { fill: #f3e7c6; }
.creature-art .shield { fill: #2b1612; }
.creature-art .cr-eye { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); }
.creature-art.cr-skelett .cr-eye { fill: #1d130b; filter: none; }
.creature-art.cr-schatten .cr-eye { fill: #b88bff; filter: drop-shadow(0 0 4px #b88bff); }
.creature-art.cr-ritter .cr-eye { fill: #7fd7ff; filter: drop-shadow(0 0 4px #7fd7ff); }
.token.selected .creature-art .cr-body { stroke: #ffd36b; }

.arena-order { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .8rem 0 0; font-size: .78rem; }
.arena-order small { font-family: var(--heading); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #b9a57a; margin-right: .2rem; }
.arena-order span { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem .1rem .15rem; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 39, .25); }
.arena-order span b { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; border-radius: 99px; font-size: .66rem; color: #1d130b; background: #9fc0f0; }
.arena-order span.foes b { background: #f0a497; }
.arena-order span.down { opacity: .45; text-decoration: line-through; }
.arena-order span.selected { border-color: #ffd36b; color: #ffd36b; }
.arena-info { margin: .6rem 0 0; font-size: .9rem; color: #d9c79c; }
.arena-info strong { color: #fff0c4; font-family: var(--heading); font-size: .8rem; }
.arena-stats { display: block; margin-top: .15rem; font-size: .8rem; color: #f0a497; }

.arena-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(201, 162, 39, .35); }
.arena-bar.gm select, .arena-bar.gm input { max-width: 11rem; color: #f3e2b0; background: #1d130b; border: 1px solid var(--gold-dark); border-radius: 6px; padding: .45rem .5rem; }
.arena-bar.gm input::placeholder { color: #8f7d5a; }
.arena-weapon { display: flex; align-items: center; gap: .5rem; }
.arena-weapon strong { display: block; font-family: var(--heading); font-size: .85rem; color: #fff0c4; }
.arena-weapon small { color: #b9a57a; }
.arena-wlevel { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 8px; font-family: var(--display); font-size: 1.1rem; color: #ffd36b; background: #1d130b; border: 2px solid var(--gold-dark); }
.arena-target { display: flex; flex-direction: column; padding: .2rem .7rem; border-left: 1px solid rgba(201, 162, 39, .3); border-right: 1px solid rgba(201, 162, 39, .3); }
.arena-target small { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #b9a57a; }
.arena-target strong { font-family: var(--heading); font-size: .85rem; color: #ff9a88; }
.arena-actions { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.arena-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 6.4rem; padding: .45rem .7rem;
  border-radius: 8px; cursor: pointer; font-family: var(--heading); font-size: .72rem; color: #f3e2b0;
  background: linear-gradient(180deg, #4a3120, #24170f); border: 1px solid var(--gold-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.arena-btn small { font-family: var(--body); font-size: .74rem; color: #d9c79c; }
.arena-btn .icon { width: 16px; height: 16px; }
.arena-btn:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
.arena-btn.attack { background: linear-gradient(180deg, #a8322a, #6a1510); border-color: #e06b5c; }
.arena-btn.heal { background: linear-gradient(180deg, #2f7a3d, #18451f); border-color: #6fc07a; }
.arena-btn.ult:not(:disabled) { border-color: #ffd36b; box-shadow: 0 0 12px rgba(255, 211, 107, .35); }
.arena-btn.locked, .arena-btn:disabled { opacity: .45; cursor: not-allowed; }
.arena-hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: #9c8a66; }
.arena-hint a { color: var(--gold-light); }
.arena-result { margin-top: 1rem; padding: 1rem; border-radius: 10px; text-align: center; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 162, 39, .45); }
.arena-result h2 { margin: 0 0 .3rem; font-family: var(--display); color: #ffd36b; text-shadow: 0 0 18px rgba(255, 211, 107, .45); }
.arena-result .hint, .arena-result .hint a { color: #b9a57a; }
.arena-result .xp-alloc { text-align: left; margin-top: .8rem; }
@media (max-width: 760px) {
  .arena { padding: .7rem .6rem .8rem; }
  .arena-field { grid-template-columns: 1fr; }
  .arena-vs { justify-self: center; }
  .arena-side.foes h3, .arena-side.foes .arena-tokens { justify-content: flex-start; }
  .token { width: calc(50% - .35rem); }
  .arena-top { flex-wrap: wrap; }
  .arena-ticker { flex-basis: calc(100% - 4.2rem); }
  .arena-btn { min-width: 0; flex: 1 1 calc(50% - .4rem); }
  .arena-target { border: 0; padding: 0; }
}

/* ---- Kampferfahrung verteilen ------------------------------------------------ */
.xp-alloc { display: grid; gap: .55rem; padding: .9rem 1rem; border-radius: 10px; color: var(--ink); background: linear-gradient(180deg, var(--parchment-light), var(--parchment)); border: 1px solid var(--gold-dark); }
.xa-head { display: flex; align-items: center; gap: .8rem; }
.xa-head h3 { margin: 0; color: var(--ink); }
.xa-head p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.xa-orb { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #1d130b; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); box-shadow: 0 0 14px rgba(201, 162, 39, .6); }
.xa-pool { margin-left: auto; text-align: center; }
.xa-pool small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.xa-left { font-family: var(--display); font-size: 1.7rem; color: var(--blood); }
.xa-quick { display: flex; flex-wrap: wrap; gap: .35rem; }
.xa-row { display: grid; grid-template-columns: minmax(10rem, 1.3fr) minmax(6rem, 2fr) 4.6rem; grid-template-areas: "label range num" "label prev prev"; align-items: center; gap: .1rem .6rem; padding: .45rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.xa-label { grid-area: label; }
.xa-label strong { display: block; font-family: var(--heading); font-size: .82rem; }
.xa-label small { color: var(--ink-soft); font-size: .8rem; }
.xa-row input[type=range] { grid-area: range; width: 100%; accent-color: var(--blood); }
.xa-row input[type=number] { grid-area: num; width: 100%; }
.xa-preview { grid-area: prev; min-height: 1em; font-size: .8rem; color: var(--forest); font-weight: 600; }
@media (max-width: 600px) { .xa-row { grid-template-columns: 1fr 4.6rem; grid-template-areas: "label label" "range num" "prev prev"; } .xa-head { flex-wrap: wrap; } }

/* Waffenstufen im Fähigkeitsbaum */
.st-ladder { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: .3rem 0 .5rem; padding: 0; }
.st-ladder li { display: grid; place-items: center; height: 1.5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; color: var(--ink-soft); background: rgba(110, 78, 38, .12); border: 1px solid var(--line); }
.st-ladder li.tech { border-style: dashed; border-color: var(--blood); }
.st-ladder li.done { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); border-style: solid; }
.st-ladder li.next { outline: 2px solid var(--blood); outline-offset: 1px; }
.st-upgrade { display: grid; gap: .2rem; margin: .3rem 0 .6rem; }
.st-upgrade .btn { justify-self: start; }
.st-upgrade small { font-size: .8rem; color: var(--ink-soft); }
.st-max { margin: .3rem 0 .6rem; font-family: var(--heading); color: var(--gold-dark); }
.st-wallet { font-family: var(--heading); font-size: .85rem; color: var(--ink-soft); }

/* ---- Update-Paket: kleine Bausteine ---- */
.gm-preview-note { display: flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; color: #f3e2b0; background: rgba(29, 19, 11, .85); border: 1px dashed var(--gold-dark); }
.profile-list { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .6rem; }
.profile-list dt { font-family: var(--heading); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.profile-list dd { margin: 0; }
.gm-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .6rem; }
.gm-progress div { text-align: center; padding: .4rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.gm-progress small { display: block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gm-progress strong { font-family: var(--display); font-size: 1.2rem; }
.gm-recipes { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.gm-recipes li { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: 6px; border: 1px dashed var(--line); }
.gm-recipes li.known { border-style: solid; background: rgba(236, 210, 126, .25); }
.gm-recipes li .btn { margin-left: auto; }
/* Lange Rohstoffnamen (z. B. Drachenschuppe) brechen in die zweite Zeile um statt zu überlaufen. */
.material { align-items: center; min-width: 0; }
.material span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
.gm-materials td .desc { font-size: .8rem; }
/* Markt: kompakte Kacheln, Details im Dialog */
.wares.compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .6rem; }
.ware-tile {
  --rc: #8a7a5c; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-height: 7.2rem; padding: .7rem .75rem;
  border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 250, 235, .85), rgba(236, 220, 180, .7)); border: 1px solid var(--line); border-top: 4px solid var(--rc);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ware-tile.r-selten { --rc: #2c6fb0; } .ware-tile.r-episch { --rc: #7a3fb0; } .ware-tile.r-legendaer { --rc: #c9861a; }
.ware-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.ware-tile:focus-visible { outline: 2px solid var(--blood); outline-offset: 2px; }
.ware-tile.sold { opacity: .55; }
.ware-tile.mine { border-style: dashed; }
.ware-name { font-family: var(--heading); font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.ware-bottom { margin-top: auto; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.ware-price s { margin-right: .3rem; color: var(--ink-soft); }
.ware-stock { color: var(--ink-soft); font-size: .78rem; }
.ware-tile.sold .ware-stock { color: var(--blood); font-weight: 700; }
.ware-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .5rem 0; font-size: .9rem; }
.ware-facts dt { color: var(--ink-soft); }
.ware-facts dd { margin: 0; }
/* Neuigkeiten: antippbar; lange Texte gekürzt, groß im Dialog */
.notif-panel li { cursor: pointer; }
.notif-panel li:hover { background: rgba(236, 210, 126, .18); }
.notif-panel li:focus-visible { outline: 2px solid var(--blood); outline-offset: -2px; }
.notif-panel li .notif-msg { display: block; }
.notif-panel li.long .notif-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-panel li.long::after { content: 'mehr lesen →'; display: block; margin-top: .15rem; font-size: .75rem; font-weight: 600; color: var(--blood); }
.notif-big time { display: block; margin-bottom: .5rem; font-size: .85rem; color: var(--ink-soft); }
.notif-big p { margin: 0; font-size: 1.15rem; line-height: 1.5; white-space: pre-wrap; }
/* Fraktionskarte: eigene Felder leuchten */
.fm-own { fill: rgba(255, 229, 138, .18); stroke: #ffe58a; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(255, 220, 110, .9)); animation: fm-own-glow 2.6s ease-in-out infinite; }
@keyframes fm-own-glow { 0%, 100% { stroke-opacity: .55; fill-opacity: .6; } 50% { stroke-opacity: 1; fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-own { animation: none; } }
/* Erfolge: Mysterium und Meilenstein-Truhen */
.ach-group.mystery { background: linear-gradient(180deg, rgba(40, 20, 60, .92), rgba(20, 10, 30, .95)); color: #e9dcf7; border-color: #7a3fb0; }
.ach-group.mystery h2 { color: #d9b8ff; }
.ach-group.mystery .hint { color: #bfa8da; }
.ach-group.mystery .ach { background: rgba(255, 255, 255, .05); border-color: rgba(185, 140, 255, .35); }
.ach-group.mystery .ach h3 { color: #f1e6ff; }
.ach-group.mystery .ach.done { background: rgba(185, 140, 255, .16); }
.ach-riddle { font-style: italic; color: #d9b8ff; }
.ach-revealed { font-size: .9rem; color: #f3d67a; }
.badge-medal.secret.locked { filter: grayscale(.2) drop-shadow(0 0 6px rgba(185, 140, 255, .7)); }
.ach-milestones .ms-track { position: relative; height: 12px; margin: 2.2rem .8rem 3.2rem; border-radius: 99px; background: rgba(0, 0, 0, .15); border: 1px solid var(--line); }
.ach-milestones .ms-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #8a6a1c, #f3d67a); }
.ach-milestones .ms-stop { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 6rem; text-align: center; }
.ach-milestones .ms-chest { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--ink-soft); background: var(--parchment-light); border: 2px solid var(--line); }
.ach-milestones .ms-stop.reached .ms-chest { color: #1d130b; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); border-color: var(--gold-dark); box-shadow: 0 0 12px rgba(201, 162, 39, .6); }
.ach-milestones .ms-stop b { font-family: var(--display); font-size: .9rem; }
.ach-milestones .ms-stop small { font-size: .68rem; color: var(--ink-soft); line-height: 1.1; }
@media (max-width: 600px) { .ach-milestones .ms-stop { width: 4.4rem; } .ach-milestones .ms-stop small { display: none; } }
/* Katalog: kompakte Listen */
.cat-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cat-tools input[type=search] { flex: 1; }
.cat-count { color: var(--ink-soft); white-space: nowrap; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.cat-chip { padding: .2rem .6rem; border-radius: 99px; cursor: pointer; font: inherit; font-size: .82rem; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); }
.cat-chip.active { color: #fff3c4; background: var(--blood); border-color: var(--blood); }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 70vh; overflow-y: auto; }
.cat-row { --rc: transparent; display: flex; align-items: center; gap: .45rem; width: 100%; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: rgba(255, 250, 235, .55); border: 1px solid var(--line); border-left: 4px solid var(--rc); }
.cat-row.static { cursor: default; }
.cat-row.r-selten { --rc: #2c6fb0; } .cat-row.r-episch { --rc: #7a3fb0; } .cat-row.r-legendaer { --rc: #c9861a; }
.cat-row:not(.static):hover { background: rgba(236, 210, 126, .35); }
.cat-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cat-price { margin-left: auto; white-space: nowrap; color: var(--ink-soft); }
.cat-sub { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.cat-sub h3 { display: flex; align-items: center; gap: .3rem; }
.dialog.wide-dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.ingredient { margin-bottom: .3rem; }
@media (max-width: 600px) { .cat-row { flex-wrap: wrap; } .cat-row .cat-name { flex-basis: 100%; } }
/* ---- Clans: Kürzel, Mitglieder, Kosmetik ---- */
.clan-tag { font-family: var(--heading); font-size: .75em; color: var(--ink-soft); letter-spacing: .04em; }
.clan-banner .clan-tag { color: var(--gold-light); }
.hint.warn { color: var(--blood); font-weight: 600; }
.clan-members-peek { margin: .2rem 0 0 3.6rem; font-size: .9rem; }
.clan-members-peek summary { cursor: pointer; color: var(--ink-soft); }
.clan-members-peek ul { margin: .3rem 0 0; padding-left: 1.1rem; columns: 2; }
.cosm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .4rem; margin: .4rem 0 .6rem; }
.cosm-option { display: flex; gap: .45rem; align-items: flex-start; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.cosm-option.on { background: rgba(236, 210, 126, .4); border-color: var(--gold-dark); }
.cosm-option strong { display: block; font-family: var(--heading); font-size: .8rem; }
.cosm-option small { color: var(--ink-soft); }
.cosm-unlock { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.cosm-design { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.clan-emblem-wrap { position: relative; display: inline-block; flex: none; }

/* Effekte am Banner (gelten auch in den Ranglisten) */
.fx-glanz .clan-emblem-wrap svg, .rk-banner.fx-glanz svg { filter: drop-shadow(0 0 6px rgba(255, 215, 110, .9)); animation: fx-shine 3s ease-in-out infinite; }
@keyframes fx-shine { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 215, 110, .6)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 230, 150, 1)); } }
.fx-aura .clan-emblem-wrap::before, .rk-banner.fx-aura::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(120, 180, 255, .55), transparent 70%); animation: fx-pulse 2.4s ease-in-out infinite; z-index: -1; }
@keyframes fx-pulse { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.fx-flammen .clan-emblem-wrap::after, .rk-banner.fx-flammen::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 45%; border-radius: 50% 50% 20% 20%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 30, .85), rgba(255, 60, 20, .4) 45%, transparent 70%); filter: blur(2px); animation: fx-flame 1.2s ease-in-out infinite alternate; z-index: -1; }
@keyframes fx-flame { from { transform: scaleY(.85); opacity: .7; } to { transform: scaleY(1.15); opacity: 1; } }
.fx-goldname .clan-banner h1 { background: linear-gradient(180deg, #fff3c4, #c9a227 60%, #8a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { [class*='fx-'] *, .clan-sparks i { animation: none !important; } }

/* Hintergründe der Clanseite */
.clan-page { position: relative; }
.clan-page.clan-bg { padding: 1rem; border-radius: 14px; }
.clan-bg-sternennacht { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent), linear-gradient(180deg, #0b1230, #1c1840 60%, #2a1c3a); }
.clan-bg-feuer { background: radial-gradient(ellipse at 50% 110%, rgba(255, 120, 20, .7), transparent 60%), linear-gradient(180deg, #2a0d06, #5a1a0a); }
.clan-bg-nordlicht { background: linear-gradient(160deg, rgba(60, 255, 180, .35), transparent 40%), linear-gradient(200deg, rgba(120, 90, 255, .35), transparent 50%), linear-gradient(180deg, #071a24, #0c2a33); }
.clan-bg-waldnebel { background: radial-gradient(ellipse at 30% 80%, rgba(220, 230, 210, .35), transparent 60%), linear-gradient(180deg, #13261a, #24402a); }
.clan-bg-blutmond { background: radial-gradient(circle at 80% 18%, #c0392b 0 5%, rgba(192, 57, 43, .35) 9%, transparent 22%), linear-gradient(180deg, #1a0606, #360c0c); }
.clan-bg-tiefsee { background: radial-gradient(ellipse at 50% 0%, rgba(80, 180, 255, .35), transparent 60%), linear-gradient(180deg, #04192e, #072a45); }
.clan-bg-goldsaal { background: repeating-linear-gradient(90deg, rgba(255, 220, 120, .08) 0 2px, transparent 2px 60px), linear-gradient(180deg, #3a2a10, #5c4214); }
.clan-bg > .alliance-bar, .clan-bg > .back { position: relative; }
.clan-bg > .back { color: #f3e2b0; }
.clan-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.clan-sparks i { position: absolute; top: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 6px #ffd36b; animation: fx-spark linear infinite; }
@keyframes fx-spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(110vh); opacity: 0; } }
.fx-nebel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 90%, rgba(20, 10, 30, .35), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(20, 10, 30, .3), transparent 55%); animation: fx-fog 9s ease-in-out infinite alternate; border-radius: 14px; }
@keyframes fx-fog { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
/* ---- Ranglisten: eine große Liste ---- */
.rk-board { padding: 0; overflow: hidden; }
.rk-board-head { padding: 1rem 1.2rem .6rem; border-bottom: 1px solid var(--line); }
.rk-board-head h2 { margin: 0; }
.rk-board-head p { margin: .2rem 0 0; color: var(--ink-soft); }
.rk-list { list-style: none; margin: 0; padding: 0; }
.rk-row { display: grid; grid-template-columns: 3rem 3.6rem minmax(0, 1.6fr) minmax(4.5rem, .6fr) minmax(0, 1fr) minmax(6rem, auto); align-items: center; gap: .6rem; padding: .45rem 1.2rem; border-bottom: 1px solid rgba(110, 78, 38, .15); }
.rk-row:nth-child(even) { background: rgba(255, 250, 235, .35); }
.rk-row.rk-head { font-family: var(--heading); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: rgba(110, 78, 38, .1); }
.rk-rank { font-family: var(--display); font-size: 1.1rem; text-align: center; color: var(--ink-soft); }
.rk-row.top .rk-rank { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: 0 auto; border-radius: 50%; color: #1d130b; }
.rk-row.gold .rk-rank { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227); box-shadow: 0 0 10px rgba(201, 162, 39, .6); }
.rk-row.silver .rk-rank { background: radial-gradient(circle at 35% 30%, #fff, #a9a9a9); }
.rk-row.bronze .rk-rank { background: radial-gradient(circle at 35% 30%, #f6d3b0, #b06a2c); }
.rk-name { font-family: var(--heading); font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name a { color: inherit; }
.rk-name.gold-name { background: linear-gradient(180deg, #e3b23c, #8a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.rk-tag { font-family: var(--heading); font-size: .85rem; color: var(--blood); white-space: nowrap; }
.rk-extra { color: var(--ink-soft); font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-value { text-align: right; font-family: var(--heading); font-weight: 700; white-space: nowrap; }
.rk-value small { font-family: var(--body); font-weight: 400; color: var(--ink-soft); }
.rk-value.up { color: var(--forest); }
.rk-value.down { color: var(--blood); }
.rk-row.real { box-shadow: inset 4px 0 0 var(--gold); }
.rk-row.me { background: rgba(236, 210, 126, .45) !important; box-shadow: inset 4px 0 0 var(--blood); }
/* Banner: Stange und Fahnentuch in Clanfarbe, Wappen darauf */
.rk-banner { position: relative; display: inline-flex; align-items: flex-start; width: 2.8rem; height: 3.4rem; isolation: isolate; }
.rk-banner.sm { width: 2rem; height: 2.4rem; }
.rk-banner.none { opacity: .25; }
.rk-banner.none::before { content: ''; width: 2px; height: 100%; margin-left: .2rem; background: var(--ink-soft); }
.rk-pole { position: absolute; left: .15rem; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #e3c26a, #6b4f1a); }
.rk-pole::before { content: ''; position: absolute; top: -3px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: #f3d67a; }
.rk-cloth { position: absolute; left: .3rem; right: 0; top: .2rem; bottom: 0; display: grid; place-items: start center; padding-top: .25rem; background: var(--cloth); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .6); }
.rk-banner.sm .rk-cloth { padding-top: .15rem; }
.rk-crown { position: absolute; top: -.75rem; left: 55%; transform: translateX(-50%); font-size: .95rem; color: #ffd36b; text-shadow: 0 0 6px rgba(255, 211, 107, .9); }
@media (max-width: 760px) {
  .rk-row { grid-template-columns: 2.2rem 2.6rem minmax(0, 1fr) auto; grid-template-areas: "rank banner name value" "rank banner tag extra"; row-gap: .05rem; padding: .45rem .7rem; }
  .rk-row .rk-rank { grid-area: rank; } .rk-row .rk-banner { grid-area: banner; } .rk-row .rk-name { grid-area: name; }
  .rk-row .rk-tag { grid-area: tag; font-size: .78rem; } .rk-row .rk-extra { grid-area: extra; text-align: right; font-size: .78rem; } .rk-row .rk-value { grid-area: value; }
  .rk-row.rk-head { display: none; }
  .rk-banner { width: 2.2rem; height: 2.7rem; }
}
/* ---- Karten ---- */
.world-soon { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem; color: #f3e2b0; background: radial-gradient(ellipse at 30% 40%, rgba(201, 162, 39, .25), transparent 60%), linear-gradient(135deg, #1d2a3a, #2b1d12); border: 2px solid var(--gold-dark); }
.world-soon h2 { margin: .1rem 0 .4rem; color: #ffd36b; }
.world-soon p { margin: 0; }
.ws-kicker { font-family: var(--heading); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #c9b58a; }
.world-soon-art { position: relative; flex: none; display: grid; place-items: center; width: 7rem; height: 7rem; }
.ws-compass { font-size: 2.6rem; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 211, 107, .7); animation: ws-spin 18s linear infinite; }
.ws-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 211, 107, .55); }
.ws-ring.r1 { inset: 8%; animation: ws-spin 30s linear infinite reverse; }
.ws-ring.r2 { inset: 22%; border-style: solid; border-color: rgba(255, 211, 107, .3); }
@keyframes ws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws-compass, .ws-ring { animation: none; } }
@media (max-width: 600px) { .world-soon { flex-direction: column; text-align: center; } }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.map-tile { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.map-thumb { display: block; padding: 0; height: 170px; overflow: hidden; border-radius: 6px; cursor: zoom-in; border: 1px solid var(--gold-dark); background: #2b1d12; }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.map-thumb:hover img { transform: scale(1.05); }
.map-meta h3 { margin: 0; text-transform: none; color: var(--ink); }
.map-meta p { margin: .2rem 0; font-size: .9rem; }
.map-meta small { color: var(--ink-soft); }
.map-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(12, 8, 5, .96); }
.mv-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; color: #f3e2b0; background: #1d130b; border-bottom: 1px solid var(--gold-dark); }
.mv-bar strong { font-family: var(--heading); }
.mv-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mv-stage { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none; }
.mv-stage:active { cursor: grabbing; }
.mv-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.mv-help { margin: 0; padding: .3rem 1rem .5rem; font-size: .8rem; color: #9c8a66; text-align: center; }
/* Feinschliff */
.rk-tag { font-family: var(--body); font-weight: 700; letter-spacing: .02em; }
.cosm-option strong, .cosm-option small { text-transform: none; letter-spacing: 0; }
.cosm-option small { display: block; font-family: var(--body); font-size: .82rem; line-height: 1.25; }
.ach-milestones .ms-track { margin-left: 2.6rem; margin-right: 3.2rem; }
.gm-materials .actions { flex-wrap: nowrap; justify-content: flex-end; }
.clan-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* ---- „Mehr“ auch am Computer: Gilde, Fraktion, Season, Klagen ---- */
.nav-more {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .5rem .6rem .55rem; cursor: pointer;
  font-family: var(--heading); font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--parchment-dark); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.nav-more:hover { color: var(--gold-light); background: rgba(201, 162, 39, .08); }
.nav-more.active-desktop { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold-dark); }
.nav-more .more-mobile { display: none; }
.nav-more-panel:not([hidden]) {
  display: grid; grid-template-columns: repeat(2, minmax(9rem, 1fr)); gap: .3rem; position: fixed; z-index: 60;
  padding: .5rem; border-radius: 10px; background: var(--noise), linear-gradient(180deg, #2b1c0f, #1a110a); border: 1px solid var(--gold-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}
.nav-more-panel a.secondary { display: none !important; }
.nav-more-panel a { display: flex !important; border-radius: 8px !important; border: 1px solid rgba(201, 162, 39, .25) !important; margin: 0 !important; }
@media (max-width: 640px) {
  .nav-more .more-mobile { display: inline; }
  .nav-more .more-desktop { display: none; }
  .nav-more.active-desktop { background: rgba(0, 0, 0, .2); color: var(--parchment-dark); }
  .nav-more.active { color: var(--blood); background: var(--noise), linear-gradient(180deg, var(--parchment-light), var(--parchment)); border-color: var(--gold); }
  .nav-more-panel:not([hidden]) { grid-template-columns: repeat(3, 1fr); border-radius: 0 0 10px 10px; }
  .nav-more-panel a.secondary { display: flex !important; }
}
@media (max-width: 640px) {
  .nav-more { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .4rem .1rem; font-size: .54rem; letter-spacing: .02em;
    background: rgba(0, 0, 0, .2); border: 1px solid rgba(201, 162, 39, .25); border-radius: 8px; }
}

/* ---- Clan-Ausbau ---- */
.clan-page > * { position: relative; z-index: 1; }
.clan-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.clan-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 99px; text-decoration: none; font-family: var(--heading); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--parchment-dark); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35); }
.clan-tabs a .icon { width: 15px; height: 15px; }
.clan-tabs a.active { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); }
.hall-level { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hall-medal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; color: #f3e2b0; background: radial-gradient(circle at 35% 30%, #4a3120, #1d130b); border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(201, 162, 39, .45); }
.hall-medal small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.hall-medal strong { font-family: var(--display); font-size: 2rem; line-height: 1; color: #ffd36b; }
.hall-level-text { flex: 1; min-width: 0; }
.hall-level-text h2 { margin: 0; }
.hall-level-text p { margin: .2rem 0; }
.hall-buildings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .7rem; }
.hall-building { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.hall-building.lvl-0 { opacity: .85; border-style: dashed; }
.hall-building.lvl-3 { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(201, 162, 39, .25); }
.hall-building header { display: flex; gap: .55rem; align-items: center; }
.hall-building h3 { margin: 0; color: var(--ink); text-transform: none; }
.hall-building header small { color: var(--ink-soft); font-size: .8rem; }
.hall-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; color: #ffd36b; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold-dark); }
.hall-pips { display: flex; gap: .25rem; }
.hall-pips i { flex: 1; height: .45rem; border-radius: 99px; background: rgba(110, 78, 38, .2); }
.hall-pips i.on { background: linear-gradient(90deg, #c9a227, #f3d67a); }
.hall-effect { margin: 0; font-weight: 600; color: var(--forest); }
.hall-building.lvl-0 .hall-effect { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.hall-next { display: grid; gap: .3rem; margin-top: auto; }
.hall-next small { color: var(--ink-soft); }
.hall-next .btn { justify-self: start; }
.hall-max { margin: auto 0 0; font-family: var(--heading); font-size: .8rem; color: var(--gold-dark); }
.hall-tavern { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .6rem .8rem; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 90, 30, .18), transparent); border: 1px solid var(--line); }
.hall-tavern > div { flex: 1; }
.hall-tavern strong { display: block; font-family: var(--heading); }
.hall-tavern small { color: var(--ink-soft); }
.clan-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.clan-quests li { padding: .55rem .7rem; border-radius: 8px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.clan-quests li.done { background: rgba(140, 200, 120, .2); border-color: rgba(47, 122, 61, .5); }
.cq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.clan-quests small { color: var(--ink-soft); }
.week-track { margin-top: 2.4rem !important; }
.clan-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .5rem; }
.clan-ach-item { display: flex; gap: .55rem; align-items: center; padding: .45rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .5); border: 1px solid var(--line); }
.clan-ach-item.done { background: rgba(236, 210, 126, .35); border-color: var(--gold-dark); }
.clan-ach-item strong { display: block; font-family: var(--heading); font-size: .82rem; }
.clan-ach-item small { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.2; }
.clan-ach-item em { font-size: .75rem; color: var(--forest); }
.clan-chronicle { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: 70vh; overflow-y: auto; }
.clan-chronicle li { display: flex; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px dashed var(--line); }
.clan-chronicle p { margin: 0; }
.clan-chronicle time { font-size: .75rem; color: var(--ink-soft); }
.cc-icon { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #fff3c4; background: var(--blood); }
.cc-icon .icon { width: 15px; height: 15px; }
.rank-rows { display: grid; gap: .35rem; margin: .5rem 0; }
.rank-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rank-row .rank-name { flex: 1; min-width: 10rem; }
.rank-select { max-width: 12rem; }

/* Bewegte Ebenen: Funken, Schnee, Blüten, Laternen, Gewitter */
.clan-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; border-radius: 14px; }
.clan-particles i { position: absolute; top: -20px; display: block; animation: fx-fall linear infinite; }
.clan-particles.sparks i { width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 6px #ffd36b; animation-name: fx-spark; }
.clan-particles.snow i { border-radius: 50%; background: #fff; opacity: .85; animation-name: fx-snow; }
.clan-particles.petals i { width: 10px; height: 7px; border-radius: 60% 0 60% 0; background: linear-gradient(135deg, #ffd1e3, #f48fb1); animation-name: fx-petal; }
.clan-particles.lanterns i { top: auto; bottom: -40px; border-radius: 40% 40% 30% 30%; background: radial-gradient(circle at 50% 60%, #ffe8a0, #ff9a3c 60%, #c4521a); box-shadow: 0 0 14px 4px rgba(255, 170, 70, .55); animation-name: fx-lantern; }
@keyframes fx-fall { from { transform: translateY(0); } to { transform: translateY(110vh); } }
@keyframes fx-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, 55vh); } 100% { transform: translate(-10px, 115vh); } }
@keyframes fx-petal { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(40px, 55vh) rotate(180deg); } 100% { transform: translate(-20px, 115vh) rotate(360deg); } }
@keyframes fx-lantern { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(20px, -120vh); opacity: 0; } }
.clan-particles.storm .flash { position: absolute; inset: 0; background: rgba(220, 230, 255, .0); animation: fx-flash 7s infinite; }
.clan-particles.storm .bolt { position: absolute; top: 0; left: 62%; width: 60px; height: 45%; background: linear-gradient(180deg, #fff, #b8d4ff); clip-path: polygon(40% 0, 70% 0, 52% 40%, 75% 40%, 25% 100%, 42% 52%, 22% 52%); opacity: 0; filter: drop-shadow(0 0 10px #cfe2ff); animation: fx-bolt 7s infinite; }
@keyframes fx-flash { 0%, 61%, 66%, 100% { background: rgba(220, 230, 255, 0); } 62% { background: rgba(220, 230, 255, .35); } 64% { background: rgba(220, 230, 255, .15); } }
@keyframes fx-bolt { 0%, 61%, 66%, 100% { opacity: 0; } 62%, 64% { opacity: 1; } }
.clan-bg-schneesturm { background: linear-gradient(180deg, #2b3a4f, #51657d 60%, #8094a8); }
.clan-bg-kirschblueten { background: radial-gradient(ellipse at 80% 10%, rgba(255, 200, 220, .35), transparent 55%), linear-gradient(180deg, #3a1f33, #6b3554); }
.clan-bg-gewitter { background: radial-gradient(ellipse at 50% 0%, rgba(90, 100, 130, .6), transparent 60%), linear-gradient(180deg, #11141c, #232a38 60%, #1a1d26); }
.clan-bg-laternen { background: radial-gradient(ellipse at 50% 110%, rgba(255, 150, 60, .35), transparent 60%), linear-gradient(180deg, #0b0f24, #1c1840); }
@media (prefers-reduced-motion: reduce) { .clan-particles i, .clan-particles b { animation: none !important; } }

/* Wehendes Banner */
.fx-wehend .clan-emblem-wrap svg, .rk-banner.fx-wehend .rk-cloth { transform-origin: 0 0; animation: fx-wave 3.2s ease-in-out infinite; }
@keyframes fx-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(2.5deg) scaleX(.97); } 75% { transform: skewY(-2.5deg) scaleX(1.02); } }

/* Rangliste: Clanstufe und Halle */
.rk-hall { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; font-family: var(--body); font-size: .75rem; color: var(--ink-soft); white-space: nowrap; }
.rk-hall b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .2rem; border-radius: 6px; font-family: var(--display); font-size: .75rem; color: #ffd36b; background: #1d130b; border: 1px solid var(--gold-dark); }
.rk-hall .rk-towers { letter-spacing: -.05em; color: var(--gold-dark); }

/* Kampfbühne: Clanwimpel */
.token-pennant { position: absolute; left: .35rem; top: 2rem; display: flex; flex-direction: column; align-items: center; padding: .15rem .2rem .45rem; min-width: 1.6rem; font-size: .55rem; font-weight: 700; color: #fff3c4; background: var(--cloth, #8e1b18); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .7); }
.token-pennant svg { width: 14px; height: 16px; }
.nav-more .more-mobile, .nav-more .more-desktop { display: inline-flex; align-items: center; gap: .45rem; }
.nav-more .more-mobile { display: none; }
@media (max-width: 640px) { .nav-more .more-mobile { display: inline-flex; flex-direction: column; gap: .15rem; } .nav-more .more-desktop { display: none; } }
.clan-quests li { min-width: 0; }
.cq-head .tag { white-space: normal; text-align: left; }
.cq-head strong { overflow-wrap: anywhere; }
/* Bewegte Ebenen nur im sichtbaren Bereich oben, damit Laternen & Co. auch wirklich zu sehen sind */
.clan-particles { bottom: auto; height: min(100%, 100vh); }
.clan-particles.storm .bolt { left: 58%; width: 130px; height: 60%; filter: drop-shadow(0 0 18px #cfe2ff) drop-shadow(0 0 40px rgba(180, 210, 255, .8)); }
.clan-particles.storm::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 35%; background: radial-gradient(ellipse at 30% 0%, rgba(10, 12, 20, .85), transparent 70%), radial-gradient(ellipse at 75% 0%, rgba(10, 12, 20, .8), transparent 65%); }
@keyframes fx-flash { 0%, 61%, 67%, 100% { background: rgba(220, 230, 255, 0); } 62% { background: rgba(220, 230, 255, .55); } 63% { background: rgba(220, 230, 255, .1); } 64.5% { background: rgba(220, 230, 255, .4); } }

/* ==== Animationen (fx.js) ==== */
.fx-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(30, 18, 8, .78), rgba(5, 3, 2, .92)); animation: fx-in .25s ease-out; cursor: pointer; overflow: hidden; }
.fx-overlay.fx-out { animation: fx-fade-out .25s ease-in forwards; }
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fade-out { to { opacity: 0; } }
.fx-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-particles i { position: absolute; display: block; }

/* Truhe */
.fx-chest-box { width: min(420px, calc(100vw - 2rem)); padding: 1.2rem 1.2rem 1rem; text-align: center; color: #f3e2b0; cursor: default; }
.fx-chest-box h2 { margin: 0 0 .4rem; color: #ffd36b; }
.fx-chest { position: relative; width: 180px; height: 150px; margin: 2.2rem auto .6rem; }
.fx-chest-svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; animation: fx-wobble .9s ease-in-out; }
.fx-chest-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.fx-chest.open .fx-chest-lid { transform: translateY(-30px) rotate(-9deg); }
.fx-chest.open .fx-chest-svg { animation: fx-pop .35s ease-out; }
.fx-beam { position: absolute; left: 50%; bottom: 40%; width: 120px; height: 0; transform: translateX(-50%); background: linear-gradient(0deg, var(--glow), transparent); filter: blur(6px); opacity: 0; border-radius: 50% 50% 0 0; }
.fx-chest.open .fx-beam { animation: fx-beam 1.2s ease-out forwards; }
@keyframes fx-wobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-6deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12, .9); } 100% { transform: scale(1); } }
@keyframes fx-beam { 0% { height: 0; opacity: 0; } 30% { opacity: 1; } 100% { height: 180px; opacity: .65; } }
.fx-loot { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.fx-loot li { display: flex; align-items: baseline; justify-content: center; gap: .4rem; padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 39, .3); opacity: 0; animation: fx-fly .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-loot li small { font-size: .7rem; opacity: .75; }
.fx-loot li.r-selten { color: #8fc0ff; border-color: #5aa0ff; }
.fx-loot li.r-episch { color: #d9a8ff; border-color: #c07bff; box-shadow: 0 0 10px rgba(192, 123, 255, .35); }
.fx-loot li.r-legendaer { color: #ffd36b; border-color: #ffc94a; box-shadow: 0 0 14px rgba(255, 201, 74, .55); }
.fx-loot li.gold { color: #ffd36b; }
@keyframes fx-fly { 0% { opacity: 0; transform: translateY(70px) scale(.4); } 100% { opacity: 1; transform: none; } }
.fx-still .fx-loot li { opacity: 1; animation: none; }
.fx-empty { opacity: .8; font-style: italic; }
.gold-rain i { top: -20px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e0a92a); box-shadow: 0 0 8px #ffd36b; animation: fx-rain linear forwards; }
@keyframes fx-rain { to { transform: translateY(110vh) rotate(540deg); } }

/* Stufenaufstieg */
.fx-levelup { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 2rem 2.5rem; color: #fff3c4; text-align: center; }
.fx-lv-beam { position: absolute; left: 50%; top: -60vh; bottom: 30%; width: 160px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255, 230, 150, .9) 70%, rgba(255, 240, 200, 0)); filter: blur(10px); animation: fx-lv-beam 1.2s ease-out; }
.fx-lv-rays { position: absolute; left: 50%; top: 32%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 120, .28) 0 8deg, transparent 8deg 20deg); animation: fx-spin 8s linear infinite, fx-in .6s ease-out; mask-image: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.fx-lv-portrait { position: relative; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 4px solid #ffd36b; box-shadow: 0 0 30px rgba(255, 211, 107, .9); background: #2b1c0f; animation: fx-pop-in .7s cubic-bezier(.2, 1.6, .4, 1); }
.fx-lv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.fx-lv-initial { font-family: var(--display); font-size: 3.4rem; color: #ffd36b; }
.fx-lv-text { position: relative; margin: .4rem 0 0; font-family: var(--display); font-size: 3rem; color: #ffd36b; text-shadow: 0 0 20px rgba(255, 211, 107, .9), 0 3px 0 #5c100c; animation: fx-pop-in .7s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-lv-sub { position: relative; margin: 0; opacity: .85; animation: fx-in .5s .8s both; }
@keyframes fx-lv-beam { from { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; } to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pop-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.lv-sparks i { bottom: 30%; width: 5px; height: 5px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd36b; animation: fx-rise 1.6s ease-out forwards; opacity: 0; }
@keyframes fx-rise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-220px); } }

/* Amboss */
.fx-anvil { display: grid; justify-items: center; gap: .25rem; padding: 1.5rem; color: #f3e2b0; text-align: center; }
.fx-anvil-stage { position: relative; width: 220px; height: 160px; }
.fx-anvil-svg { position: absolute; left: 30px; bottom: 0; width: 160px; height: 110px; }
.fx-anvil-blade { filter: drop-shadow(0 0 6px rgba(255, 140, 40, .9)); animation: fx-hot 1.6s ease-in-out; }
@keyframes fx-hot { 0% { fill: #ff9a3c; } 70% { fill: #ffd9a0; } 100% { fill: #dfe7ef; } }
.fx-anvil-hammer { position: absolute; right: 18px; top: 0; color: #c9b58a; transform-origin: 80% 80%; animation: fx-hammer .45s ease-in 3; }
.fx-anvil-hammer .icon { width: 64px; height: 64px; transform: rotate(-30deg); }
@keyframes fx-hammer { 0% { transform: rotate(-40deg); } 70% { transform: rotate(18deg); } 100% { transform: rotate(-40deg); } }
.sparks i { left: 50%; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 8px #ff9a3c; animation: fx-burst .8s ease-out forwards; }
@keyframes fx-burst { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.fx-anvil-title { margin: .4rem 0 0; font-family: var(--heading); font-size: 1.2rem; color: #fff3c4; }
.fx-anvil-level { margin: 0; font-family: var(--display); font-size: 1.8rem; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 211, 107, .7); animation: fx-pop-in .6s 1.3s both cubic-bezier(.2, 1.6, .4, 1); }
.fx-anvil-tech { margin: .3rem 0 0; padding: .4rem .9rem; border-radius: 99px; background: rgba(255, 211, 107, .15); border: 1px solid #ffd36b; animation: fx-in .5s 1.8s both, fx-glow 1.6s 2.2s ease-in-out infinite; }
.fx-anvil-tech.plain { animation: fx-in .5s 1.8s both; }
@keyframes fx-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 211, 107, .4); } 50% { box-shadow: 0 0 22px rgba(255, 211, 107, .95); } }

/* Erfolg */
.fx-ach { position: fixed; z-index: 2100; top: 4.5rem; left: 50%; display: flex; align-items: center; gap: .8rem; min-width: 260px; padding: .7rem 1.1rem .7rem .7rem; border-radius: 14px; color: #fff3c4; background: linear-gradient(180deg, #3a2614, #1d130b); border: 2px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); transform: translateX(-50%); animation: fx-ach-in .5s cubic-bezier(.2, 1.4, .4, 1); cursor: pointer; overflow: hidden; }
.fx-ach.fx-out { animation: fx-fade-out .3s forwards; }
.fx-ach small { display: block; font-family: var(--heading); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #c9b58a; }
.fx-ach strong { font-family: var(--heading); font-size: 1.05rem; color: #ffd36b; }
.fx-ach-medal { position: relative; flex: none; overflow: hidden; border-radius: 50%; animation: fx-drop .8s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
.fx-ach-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); transform: translateX(-120%); animation: fx-shine-sweep .9s 1s ease-in-out forwards; }
@keyframes fx-ach-in { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fx-drop { from { transform: translateY(-80px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fx-shine-sweep { to { transform: translateX(120%); } }
.fx-ach.secret { border-color: #b88bff; background: linear-gradient(180deg, #2b1640, #140a20); }
.fx-ach.secret strong { color: #d9b8ff; }
.fx-ach.secret .fx-ach-medal { animation-delay: 1.1s; }
.fx-ach.secret .fx-ach-shine { animation-delay: 2s; }
.fx-ach-fog { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 50%, rgba(185, 140, 255, .9), rgba(90, 40, 140, .7) 40%, transparent 70%); filter: blur(8px); animation: fx-fog 1.4s ease-out forwards; z-index: 2; pointer-events: none; }
@keyframes fx-fog { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.badge-medal.big { width: 3.4rem; height: 3.4rem; }

/* Würfel */
.fx-dice-overlay { background: rgba(5, 3, 2, .45); }
.fx-dice-row { position: relative; width: 100%; height: 160px; }
.fx-die { position: absolute; top: 50%; left: calc(50% + (var(--i) - (var(--n) - 1) / 2) * 140px); width: 110px; height: 110px; margin: -55px 0 0 -55px; animation: fx-roll 1.05s cubic-bezier(.2, .7, .3, 1) forwards; }
.fx-die-svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.fx-die-num { font-family: var(--display); font-size: 26px; font-weight: 900; fill: #fff3c4; }
.fx-die-num.dark { fill: #2b1c0f; font-size: 40px; }
.fx-die.landed { animation: fx-land .35s ease-out; }
@keyframes fx-roll { 0% { transform: translateX(-70vw) rotate(-900deg) scale(.7); } 75% { transform: translateX(12px) rotate(20deg) scale(1.05); } 100% { transform: translateX(0) rotate(0) scale(1); } }
@keyframes fx-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fx-crit .fx-die-svg polygon:first-child { fill: #c9a227; }
.fx-crit .fx-die { filter: drop-shadow(0 0 20px #ffd36b); }
.glitter i { width: 6px; height: 6px; background: #fff3c4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fx-twinkle 1s ease-in-out infinite; }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.6); } }
.fx-crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: fx-crack .25s steps(3) both; }
.fx-fumble .fx-dice-row { animation: fx-shake-x .5s ease-in-out; }
@keyframes fx-crack { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Kampfbühne */
.fx-shake { animation: fx-shake-x .45s ease-in-out; }
.fx-shake-strong { animation: fx-shake-xy .6s ease-in-out; }
@keyframes fx-shake-x { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes fx-shake-xy { 0%, 100% { transform: none; } 15% { transform: translate(-10px, 4px) rotate(-.6deg); } 30% { transform: translate(9px, -5px) rotate(.6deg); } 45% { transform: translate(-7px, 3px); } 60% { transform: translate(6px, -2px); } 80% { transform: translate(-3px, 1px); } }
.token.fx-dying .token-art { animation: fx-dissolve 1.6s ease-out; }
@keyframes fx-dissolve { 0% { filter: none; opacity: 1; transform: none; } 40% { filter: brightness(2) blur(1px); } 100% { filter: grayscale(1) brightness(.6) blur(0); opacity: .55; transform: rotate(-8deg); } }
.smoke i { bottom: 35%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 190, 180, .75), rgba(120, 110, 100, 0) 70%); animation: fx-smoke 1.6s ease-out forwards; opacity: 0; }
@keyframes fx-smoke { 0% { opacity: .9; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-70px) scale(calc(2.4 * var(--s))); } }
.heal-sparks i { bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: #8fe38a; box-shadow: 0 0 8px #5fc35a; animation: fx-rise-short 1.4s ease-out forwards; opacity: 0; }
@keyframes fx-rise-short { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-80px); } }
.fx-confetti { position: fixed; inset: 0; z-index: 1900; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: fx-confetti linear forwards; }
@keyframes fx-confetti { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }

/* Seltene Gegenstände schimmern im Inventar */
.bag-tile, .slot.filled, .vault-slot.filled, .bag-row { position: relative; overflow: hidden; }
.bag-tile.r-legendaer::after, .bag-tile.r-episch::after, .slot.filled.r-legendaer::after, .slot.filled.r-episch::after, .vault-slot.filled.r-legendaer::after, .vault-slot.filled.r-episch::after, .bag-row.r-legendaer::after, .bag-row.r-episch::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); animation: fx-shimmer 4.5s ease-in-out infinite; }
.bag-tile.r-legendaer::after, .slot.filled.r-legendaer::after, .vault-slot.filled.r-legendaer::after, .bag-row.r-legendaer::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 215, 110, .55) 50%, transparent 70%); }
.bag-tile.r-episch::after, .slot.filled.r-episch::after, .vault-slot.filled.r-episch::after, .bag-row.r-episch::after { background: linear-gradient(110deg, transparent 30%, rgba(200, 140, 255, .45) 50%, transparent 70%); animation-delay: 1.5s; animation-duration: 6s; }
.bag-tile.r-legendaer, .slot.filled.r-legendaer { box-shadow: 0 0 12px rgba(255, 201, 74, .45); }
@keyframes fx-shimmer { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .fx-overlay, .fx-overlay *, .fx-ach, .fx-ach *, .bag-tile::after, .slot::after, .vault-slot::after, .bag-row::after, .token.fx-dying .token-art { animation: none !important; }
  .fx-loot li { opacity: 1; }
}

/* ==== Seltenheiten: Gewöhnlich (grün) · Selten (blau) · Veredelt (türkis) · Episch (lila) · Heroisch (orange) ·
        Legendär (gelb) · Mythisch (rot) · Black (schwarz) · Adamant (rubinrot/grün) ==== */
:root {
  --r-gewoehnlich: #3f9d4a; --r-selten: #2c6fb0; --r-veredelt: #139a9a; --r-episch: #8a3fc4; --r-heroisch: #e07b1a;
  --r-legendaer: #e2b714; --r-mythisch: #c62828; --r-black: #111014; --r-adamant: #9b111e;
}
[class].r-gewoehnlich { --rc: #3f9d4a; --rc2: #5cb85c; --rcg: rgba(63, 157, 74, .18); --rct: #2e7a37; --rcl: #8fe39a; }
[class].r-selten { --rc: #2c6fb0; --rc2: #4a8fd4; --rcg: rgba(44, 111, 176, .35); --rct: #22568a; --rcl: #8fc0ff; }
[class].r-veredelt { --rc: #139a9a; --rc2: #2cc4b8; --rcg: rgba(19, 154, 154, .38); --rct: #0e7070; --rcl: #7ff0e6; }
[class].r-episch { --rc: #8a3fc4; --rc2: #a35fdb; --rcg: rgba(138, 63, 196, .42); --rct: #6e2aa6; --rcl: #d9a8ff; --shine: rgba(200, 140, 255, .45); }
[class].r-heroisch { --rc: #e07b1a; --rc2: #f39c3d; --rcg: rgba(224, 123, 26, .45); --rct: #b0590a; --rcl: #ffbe7a; --shine: rgba(255, 170, 80, .5); }
[class].r-legendaer { --rc: #e2b714; --rc2: #f5d547; --rcg: rgba(242, 200, 40, .6); --rct: #8f7104; --rcl: #ffe066; --shine: rgba(255, 225, 100, .6); }
[class].r-mythisch { --rc: #c62828; --rc2: #ef5350; --rcg: rgba(220, 40, 40, .55); --rct: #a01818; --rcl: #ff8080; --shine: rgba(255, 90, 90, .55); }
[class].r-black { --rc: #111014; --rc2: #3a1f5c; --rcg: rgba(80, 0, 160, .55); --rct: #111014; --rcl: #c9a8ff; --shine: rgba(150, 90, 255, .5); }
[class].r-adamant { --rc: #9b111e; --rc2: #1e8a4c; --rcg: rgba(155, 17, 30, .55); --rct: #9b111e; --rcl: #ff6b81; --shine: rgba(255, 70, 100, .55); --shine2: rgba(60, 220, 130, .55); }

/* Etiketten und Textfarbe */
.tag.rarity { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--rc), var(--rc2, var(--rc))); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.tag.rarity.r-black { color: #e9e0ff; background: linear-gradient(90deg, #050507, #2a1640); box-shadow: 0 0 8px rgba(106, 0, 255, .45); }
.tag.rarity.r-adamant { background: linear-gradient(90deg, #9b111e, #c2185b 45%, #1e8a4c); box-shadow: 0 0 8px rgba(155, 17, 30, .45); }
.tag.rarity.r-legendaer { color: #4a3a00; text-shadow: none; }
.rarity-text { color: var(--rct, inherit); font-weight: 600; }
.rarity-text.r-adamant { background: linear-gradient(90deg, #b3122a, #1e8a4c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Rahmen und Leuchten der Gegenstände */
.bag-tile, .bag-item, .ware, .slot.filled, .vault-slot.filled, .recipe, .item-detail { border-color: var(--rc, var(--line)); }
.bag-tile[class*=" r-"], .slot.filled[class*=" r-"], .item-detail[class*=" r-"] { border-width: 2px; border-style: solid; box-shadow: 0 0 10px var(--rcg); }
.bag-item[class*=" r-"], .ware[class*=" r-"] { box-shadow: 0 0 0 1px var(--rc), 0 0 12px var(--rcg); }
.bag-row[class*=" r-"] { border-left-color: var(--rc); }
.bag-tile .tile-name, .bag-row strong, .bag-item h3, .ware h3, .slot.filled .slot-item, .recipe h3, .shop-slot .shop-name, .cat-row .cat-name { color: var(--rct, inherit); }
.ware-tile[class*=" r-"], .cat-row[class*=" r-"] { --rcx: 1; }
.dialog.shop-dialog[class*=" r-"] { box-shadow: 0 0 0 2px var(--rc), 0 0 30px var(--rcg), 0 20px 60px rgba(0, 0, 0, .6); }
.shop-slot[class*=" r-"] { background: var(--noise), radial-gradient(circle at 50% 32%, #fffdf6 0, color-mix(in srgb, var(--rc) 18%, #f7ecd0) 60%, color-mix(in srgb, var(--rc) 38%, #e9d7a8) 100%); }

/* Black: tiefschwarz mit violettem Schimmer */
.bag-tile.r-black, .slot.filled.r-black, .ware-tile.r-black, .shop-slot.r-black, .cat-row.r-black, .recipe.r-black, .vault-slot.filled.r-black { background: linear-gradient(180deg, #2a2730, #0b0a0e); border-color: #000; box-shadow: 0 0 14px rgba(106, 0, 255, .45); }
.bag-tile.r-black .tile-name, .slot.filled.r-black .slot-item, .ware-tile.r-black .ware-name, .shop-slot.r-black .shop-name, .cat-row.r-black .cat-name, .recipe.r-black h3,
.ware-tile.r-black, .shop-slot.r-black, .cat-row.r-black, .slot.filled.r-black, .bag-tile.r-black { color: #e9e0ff; }
.bag-tile.r-black small, .slot.filled.r-black small, .ware-tile.r-black small, .shop-slot.r-black small { color: #b5a8d6; }
/* Adamant: dunkler Edelstein – Rubinrot fließt in Smaragdgrün, mit Facetten und doppeltem Rahmen */
.bag-tile.r-adamant, .slot.filled.r-adamant, .ware-tile.r-adamant, .shop-slot.r-adamant, .cat-row.r-adamant, .recipe.r-adamant, .vault-slot.filled.r-adamant, .bag-row.r-adamant {
  border-color: #9b111e;
  box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 18px rgba(155, 17, 30, .5), 0 0 26px rgba(30, 138, 76, .35);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 18% 12%, rgba(255, 80, 105, .45), transparent 55%),
    radial-gradient(circle at 85% 92%, rgba(60, 220, 130, .4), transparent 55%),
    linear-gradient(135deg, #5c0815 0%, #330a14 46%, #072b1a 54%, #0d4a2a 100%);
  color: #ffe9ec;
  animation: adamant-pulse 4s ease-in-out infinite;
}
.bag-row.r-adamant { border-left-color: #9b111e; }
.item-detail.r-adamant { border: 2px solid #9b111e; box-shadow: 0 0 0 2px #1e8a4c, 0 0 18px rgba(155, 17, 30, .45); background: linear-gradient(135deg, #fff1f3, #eafff2); }
@keyframes adamant-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 20px rgba(155, 17, 30, .65), 0 0 22px rgba(30, 138, 76, .25); }
  50% { box-shadow: 0 0 0 2px #1e8a4c, 0 0 0 4px #9b111e, 0 0 20px rgba(30, 138, 76, .6), 0 0 22px rgba(155, 17, 30, .3); }
}
@media (prefers-reduced-motion: reduce) { [class].r-adamant { animation: none; } }
.ware-tile.r-adamant, .shop-slot.r-adamant, .cat-row.r-adamant, .slot.filled.r-adamant, .bag-tile.r-adamant, .recipe.r-adamant h3, .bag-row.r-adamant strong { color: #ffe9ec; }
.bag-tile.r-adamant small, .slot.filled.r-adamant small, .ware-tile.r-adamant small, .shop-slot.r-adamant small, .cat-row.r-adamant small, .recipe.r-adamant small, .bag-row.r-adamant small { color: #e3c2c8; }
.bag-tile.r-adamant .tile-name, .slot.filled.r-adamant .slot-item, .shop-slot.r-adamant .shop-name, .ware-tile.r-adamant .ware-name, .cat-row.r-adamant .cat-name, .bag-row.r-adamant strong {
  background: linear-gradient(90deg, #ff8a9b, #ffd6dc 50%, #7dffb4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dialog.shop-dialog.r-adamant { box-shadow: 0 0 0 2px #9b111e, 0 0 0 4px #1e8a4c, 0 0 36px rgba(155, 17, 30, .55), 0 20px 60px rgba(0, 0, 0, .6); }

/* Schimmer ab Episch – in der Farbe der Seltenheit */
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row):is(.r-episch, .r-heroisch, .r-legendaer, .r-mythisch, .r-black, .r-adamant)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, var(--shine) 50%, transparent 70%); animation: fx-shimmer 4.5s ease-in-out infinite;
}
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-episch::after { animation-duration: 6s; animation-delay: 1.5s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-heroisch::after { animation-duration: 5.5s; animation-delay: .8s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-mythisch::after { animation-duration: 3.6s; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-black::after { animation-duration: 5s; mix-blend-mode: screen; }
:is(.bag-tile, .slot.filled, .vault-slot.filled, .bag-row).r-adamant::after { animation-duration: 3.2s; background: linear-gradient(110deg, transparent 25%, var(--shine) 42%, var(--shine2) 58%, transparent 75%); }
:is(.bag-tile, .slot.filled).r-mythisch { animation: fx-pulse-glow 2.4s ease-in-out infinite; }
@keyframes fx-pulse-glow { 0%, 100% { box-shadow: 0 0 8px var(--rcg); } 50% { box-shadow: 0 0 20px var(--rcg); } }

/* Truhen-Animation: Beutezeilen in Seltenheitsfarbe */
.fx-loot li[class*="r-"] { color: var(--rcl); border-color: var(--rc); box-shadow: 0 0 10px var(--rcg); }
.fx-loot li.r-gewoehnlich { box-shadow: none; }
.fx-loot li.r-black { background: rgba(20, 0, 40, .7); border-color: #6a00ff; }
.fx-loot li.r-adamant { border-color: #9b111e; box-shadow: 0 0 0 1px #1e8a4c, 0 0 14px rgba(155, 17, 30, .55); }
.ember-rain i { top: -20px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffd0a0, #e03a1a); box-shadow: 0 0 10px #ff4d2a; animation: fx-rain linear forwards; }
.shadow-rain i { top: -20px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #1a0033, #000); box-shadow: 0 0 12px 3px rgba(106, 0, 255, .7); animation: fx-rain linear forwards; }
.adamant-rain i { top: -20px; width: 8px; height: 8px; transform: rotate(45deg); background: #c2185b; box-shadow: 0 0 10px #ff2b4a; animation: fx-rain linear forwards; }
.adamant-rain i:nth-child(even) { background: #1e8a4c; box-shadow: 0 0 10px #3ce082; }
/* Dunkle Kacheln (Black, Adamant): Preise und Abzeichen hell genug zum Lesen */
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe):is(.r-black, .r-adamant) .coins { color: var(--gold-light, #f3d27a); }
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe):is(.r-black, .r-adamant) s { color: rgba(255, 235, 240, .65); }
:is(.ware-tile, .shop-slot, .bag-tile, .cat-row, .recipe).r-adamant .tag.rarity { box-shadow: 0 0 0 1px rgba(255, 235, 240, .7), 0 0 10px rgba(0, 0, 0, .45); }

/* ==== Clan-Ausbau II: Forschung, Relikt, Schrein, Verwaltung, Saison, Wappen-Editor, Allianzen ==== */
:root { --laurel-gold: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%238a6512%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23f0c84a%22 stroke=%22%238a6512%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%238a6512%22 stroke-width=%223%22/></svg>"); --laurel-silber: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%236f7a88%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23e3e7ee%22 stroke=%22%236f7a88%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%236f7a88%22 stroke-width=%223%22/></svg>"); --laurel-bronze: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22><path d=%22M60 112C30 110 12 86 14 30M60 112C90 110 108 86 106 30%22 fill=%22none%22 stroke=%22%237a4318%22 stroke-width=%222%22/><ellipse cx=%2250.6%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-205 50.6 113.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2269.4%22 cy=%22113.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28385 69.4 113.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2252.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 52.0 105.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2268.0%22 cy=%22105.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 68.0 105.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2238.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-191 38.0 109.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2282.0%22 cy=%22109.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28371 82.0 109.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2241.3%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 41.3 102.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2278.7%22 cy=%22102.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 78.7 102.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2226.8%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-177 26.8 102.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2293.2%22 cy=%22102.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28357 93.2 102.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2231.7%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 31.7 96.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2288.3%22 cy=%2296.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 88.3 96.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2217.4%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-163 17.4 93.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22102.6%22 cy=%2293.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28343 102.6 93.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2223.8%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 23.8 88.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2296.2%22 cy=%2288.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 96.2 88.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2210.7%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-149 10.7 82.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22109.3%22 cy=%2282.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28329 109.3 82.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2218.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-79 18.0 78.7%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22102.0%22 cy=%2278.7%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28259 102.0 78.7%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%226.8%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-135 6.8 69.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22113.2%22 cy=%2269.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28315 113.2 69.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.7%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-65 14.7 68.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.3%22 cy=%2268.0%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28245 105.3 68.0%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%226.1%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-121 6.1 56.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22113.9%22 cy=%2256.2%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28301 113.9 56.2%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.1%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-51 14.1 56.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.9%22 cy=%2256.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28231 105.9 56.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%228.6%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-107 8.6 43.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22111.4%22 cy=%2243.3%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28287 111.4 43.3%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2216.3%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-37 16.3 45.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22103.7%22 cy=%2245.8%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28217 103.7 45.8%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2214.2%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-93 14.2 31.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%22105.8%22 cy=%2231.4%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28273 105.8 31.4%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2221.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28-23 21.0 35.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><ellipse cx=%2299.0%22 cy=%2235.6%22 rx=%228%22 ry=%223.2%22 transform=%22rotate%28203 99.0 35.6%29%22 fill=%22%23d08a4a%22 stroke=%22%237a4318%22 stroke-width=%22.7%22/><path d=%22M50 108l10 7 10-7%22 fill=%22none%22 stroke=%22%237a4318%22 stroke-width=%223%22/></svg>"); }

/* Reiter mit „bald“ */
.tab-soon { margin-left: .3rem; padding: .05rem .35rem; border-radius: 99px; font-style: normal; font-size: .58rem; letter-spacing: .06em; color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); }
.clan-tabs a.tab-is-soon:not(.active) { opacity: .85; }
.cosm-option .tab-soon { vertical-align: middle; }

/* Schrein */
.hall-shrine { background: linear-gradient(90deg, rgba(255, 236, 160, .3), transparent); }
.hall-shrine .hall-icon { color: #b8891b; }

/* Anwerbebrett */
.recruit-board h2 .icon { vertical-align: -3px; }
.recruit-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; padding: .4rem .2rem; }
.recruit-note { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1rem .9rem .8rem; background: linear-gradient(180deg, #fff8e4, #f1e2bb); border: 1px solid rgba(110, 78, 38, .35); border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); transform: rotate(-.6deg); }
.recruit-note:nth-child(even) { transform: rotate(.7deg); }
.recruit-note header { display: flex; gap: .55rem; align-items: center; }
.recruit-note header small { display: block; color: var(--ink-soft); }
.recruit-note p { margin: 0; font-style: italic; white-space: pre-wrap; }
.recruit-note .btn, .recruit-note .tag { align-self: flex-start; }
.recruit-pin { position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #9b1b14 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.recruit-quote { margin: .4rem 0; padding: .5rem .7rem; border-left: 3px solid var(--gold-dark, #8a6512); background: rgba(255, 250, 235, .6); font-style: italic; white-space: pre-wrap; }
.recruit-quote.small { font-size: .85rem; margin: .3rem 0 0; }

/* Forschung */
.research-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .8rem; }
.research-branch { display: flex; flex-direction: column; gap: .55rem; }
.research-branch h3 { margin: 0 0 .1rem; text-align: center; }
.research-node { position: relative; display: flex; gap: .55rem; padding: .55rem .6rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.research-node:not(:last-child)::after { content: ''; position: absolute; left: 1.2rem; bottom: -.6rem; width: 2px; height: .6rem; background: var(--line); }
.research-node > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.research-node small { color: var(--ink-soft); }
.research-node em { color: #2f7a3d; font-style: normal; font-weight: 700; font-size: .8rem; }
.research-node .btn { align-self: flex-start; margin-top: .2rem; }
.research-dot { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--line); font-size: .75rem; color: #fff; }
.research-node.done { background: rgba(140, 200, 120, .2); border-color: rgba(47, 122, 61, .5); }
.research-node.done .research-dot { background: #2f7a3d; border-color: #2f7a3d; }
.research-node.ready { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .35), 0 0 12px rgba(201, 162, 39, .25); }
.research-node.ready .research-dot { border-color: #c9a227; background: radial-gradient(circle, #f3d67a, #c9a227); }
.research-node.locked { opacity: .7; }

/* Relikt */
.relic-show.bag-tile { flex-direction: row; align-items: center; text-align: left; gap: .8rem; min-height: 0; padding: .8rem 1rem; cursor: default; margin: .2rem 0 .6rem; }
.relic-show p { margin: .3rem 0 0; }
.relic-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; flex: none; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); border: 2px solid var(--rc, #c9a227); box-shadow: 0 0 14px var(--rcg, rgba(201, 162, 39, .4)); }
.relic-icon .icon { width: 1.8rem; height: 1.8rem; }
.relic-ladder { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: .5rem 0 .8rem; padding: 0; }
.relic-ladder li { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .1rem; border-radius: 6px; border-top: 4px solid var(--rc); background: rgba(255, 250, 235, .5); font-size: .62rem; text-align: center; min-width: 0; }
.relic-ladder li span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.relic-ladder li.now { outline: 2px solid #c9a227; box-shadow: 0 0 10px rgba(201, 162, 39, .5); background: rgba(255, 236, 160, .55); }
.relic-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .5rem; }
.relic-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .55rem .65rem; font: inherit; text-align: left; color: var(--ink); background: rgba(255, 250, 235, .7); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.relic-choice:hover:not(:disabled) { border-color: #c9a227; }
.relic-choice small { color: var(--ink-soft); }
.relic-choice.on { border-color: #2f7a3d; background: rgba(140, 200, 120, .22); cursor: default; }
@media (max-width: 600px) { .relic-ladder { grid-template-columns: repeat(5, 1fr); } }

/* Abstimmungen */
.polls { display: grid; gap: .8rem; }
.poll { padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 250, 235, .6); border: 1px solid var(--line); }
.poll.closed { opacity: .85; }
.poll header { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .45rem; }
.poll header small { color: var(--ink-soft); }
.poll ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.poll li { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; overflow: hidden; border: 1px solid transparent; }
.poll-bar { position: absolute; inset: 0; z-index: 0; }
.poll-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(201, 162, 39, .35), rgba(201, 162, 39, .15)); }
.poll li > :not(.poll-bar) { position: relative; z-index: 1; }
.poll li.mine { border-color: #c9a227; }
.poll li.won .poll-bar span { background: linear-gradient(90deg, rgba(47, 122, 61, .4), rgba(47, 122, 61, .15)); }
.poll li.won .poll-text { font-weight: 700; }
.poll .actions { margin-top: .4rem; }
.poll-form { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.poll-opts { display: grid; gap: .35rem; margin-bottom: .4rem; }

/* Steuer, Rechte */
.tax-big { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.tax-big strong { font-family: var(--heading); font-size: 2.2rem; color: #8a6512; }
.rights-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rights-table th, .rights-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); text-align: center; }
.rights-table th:first-child, .rights-table td:first-child { text-align: left; }
.rights-table th { font-size: .7rem; font-weight: 600; color: var(--ink-soft); }
.rights-table td.yes { color: #2f7a3d; font-weight: 700; }
.rights-table td.no { color: var(--ink-soft); }
.rank-row { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 250, 235, .5); }
.rank-row-head { display: flex; gap: .5rem; align-items: center; }
.rank-row-head .rank-name { flex: 1; }
.rank-perms { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .85rem; }
.rank-rows { display: grid; gap: .5rem; margin-bottom: .5rem; }

/* Saison */
.season-table { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.season-table li { display: grid; grid-template-columns: 2rem auto 1fr auto; align-items: center; gap: .55rem; padding: .35rem .55rem; border-radius: 8px; background: rgba(255, 250, 235, .55); border: 1px solid var(--line); }
.season-table li.mine { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .4); background: rgba(255, 236, 160, .45); }
.season-place { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-family: var(--heading); background: rgba(0, 0, 0, .08); }
.season-table li.place-1 .season-place { background: radial-gradient(circle at 35% 30%, #fff2b0, #d4a52a 60%, #8a6512); color: #2a1b10; }
.season-table li.place-2 .season-place { background: radial-gradient(circle at 35% 30%, #fff, #c7ccd4 60%, #7c8794); color: #2a2f36; }
.season-table li.place-3 .season-place { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c27a3a 60%, #7a4318); color: #2a1408; }
.season-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-name small { color: var(--ink-soft); }
.season-rewards, .season-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.season-rewards li { display: flex; align-items: center; gap: .7rem; }
.season-rewards small { display: block; color: var(--ink-soft); }
.laurel-badge { flex: none; width: 3rem; height: 3rem; background: center / contain no-repeat; }
.laurel-badge.l1 { background-image: var(--laurel-gold); }
.laurel-badge.l2 { background-image: var(--laurel-silber); }
.laurel-badge.l3 { background-image: var(--laurel-bronze); }

/* Lorbeer um das Wappen (Saison-Lohn) */
:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) .clan-emblem-wrap { padding: 14px 16px 6px; background: center bottom / 100% auto no-repeat; }
.fx-lorbeer_bronze .clan-emblem-wrap { background-image: var(--laurel-bronze); }
.fx-lorbeer_silber .clan-emblem-wrap { background-image: var(--laurel-silber); }
.fx-lorbeer_gold .clan-emblem-wrap { background-image: var(--laurel-gold); filter: drop-shadow(0 0 6px rgba(255, 215, 110, .55)); }
.rk-banner:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) { background: center 70% / 150% auto no-repeat; }
.rk-banner.fx-lorbeer_gold { background-image: var(--laurel-gold); }
.rk-banner.fx-lorbeer_silber { background-image: var(--laurel-silber); }
.rk-banner.fx-lorbeer_bronze { background-image: var(--laurel-bronze); }

/* Hintergrund „Halle der Sieger“: goldene Säulen, Siegesbanner, wandernder Lichtschein */
.clan-bg-siegerhalle {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .0) 60%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, transparent 0 7%, rgba(255, 223, 130, .22) 7% 8.5%, rgba(120, 80, 10, .35) 8.5% 10%, transparent 10% 16.6%),
    linear-gradient(180deg, #4a1010 0 9%, transparent 9%),
    radial-gradient(ellipse at 50% -10%, rgba(255, 220, 120, .55), transparent 55%),
    linear-gradient(180deg, #3b2608, #6b4a12 55%, #2a1a06);
}
.clan-bg-siegerhalle::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 9%, #8e1b18 9% 13%, transparent 13% 16.6%); -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .75; }
.clan-bg-siegerhalle::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 190, .18) 50%, transparent 65%); background-size: 250% 100%; animation: siegerhalle-shine 7s ease-in-out infinite; }
.clan-bg-siegerhalle > :not(.clan-particles) { position: relative; z-index: 1; }
@keyframes siegerhalle-shine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .clan-bg-siegerhalle::after { animation: none; } }

/* Allianzen (bald) */
.alliance-soon { display: grid; gap: 1rem; text-align: center; justify-items: center; }
.alliance-image { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.alliance-placeholder { display: grid; place-items: center; gap: .4rem; width: 100%; min-height: 260px; border-radius: 12px; border: 2px dashed rgba(110, 78, 38, .45); background: repeating-linear-gradient(45deg, rgba(201, 162, 39, .06) 0 12px, transparent 12px 24px); color: var(--ink-soft); }
.alliance-placeholder .icon { width: 3rem; height: 3rem; opacity: .6; }
.alliance-text h2 { margin: .4rem 0 .2rem; }
.alliance-text p { max-width: 40rem; margin: 0 auto; }
.alliance-upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; }
.alliance-upload small { color: var(--ink-soft); flex-basis: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wappen-Editor */
.crest-dialog { max-width: min(980px, 96vw); }
.crest-editor { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.2rem; align-items: start; }
.crest-left { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.crest-preview { display: grid; place-items: center; width: 100%; padding: 1rem; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff8e4, #e9d6a8); border: 1px solid var(--line); }
.crest-preview svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.crest-right { display: grid; gap: .6rem; min-width: 0; }
.crest-group { margin: 0; padding: .4rem .6rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.crest-group legend { padding: 0 .3rem; font-family: var(--heading); font-size: .8rem; }
.crest-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
.crest-pick { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem; padding: .25rem; border-radius: 8px; border: 2px solid transparent; background: rgba(255, 250, 235, .7); cursor: pointer; }
.crest-pick:hover { border-color: rgba(201, 162, 39, .6); }
.crest-pick.on { border-color: #c9a227; background: rgba(255, 236, 160, .7); box-shadow: 0 0 8px rgba(201, 162, 39, .5); }
.swatch-dot { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); font-size: .7rem; font-weight: 700; }
.swatch-dot.auto { background: conic-gradient(#e8c766 0 50%, #2a1b10 50%); color: #fff; text-shadow: 0 0 2px #000; }
@media (max-width: 700px) { .crest-editor { grid-template-columns: 1fr; } .crest-left { position: static; } }

/* Allianz-Szene: Fenster flackern, Fluss glitzert, die Ringe des Schwurs leuchten */
.soon .window rect { animation: twinkle 4.5s ease-in-out infinite; }
.soon .shimmer { animation: ally-shimmer 4s ease-in-out infinite; }
.soon .oath-glow { transform-box: fill-box; transform-origin: center; animation: ally-oath 3.2s ease-in-out infinite; }
@keyframes ally-shimmer { 0%, 100% { opacity: .25; transform: translateX(-6px); } 50% { opacity: 1; transform: translateX(6px); } }
@keyframes ally-oath { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.soon.soon-figure { display: block; min-height: 0; padding: 0; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.soon-figure .soon-scene { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; z-index: 0; }
.alliance-rumors { list-style: none; margin: .8rem auto 0; padding: 0; max-width: 40rem; display: grid; gap: .3rem; font-style: italic; color: var(--ink-soft); }
.alliance-rumors li::before { content: '❧ '; color: #b8891b; font-style: normal; }

/* ==== Die Krone ==== */
.clan-banner { position: relative; }
.clan-crown-badge { position: absolute; top: .7rem; right: .8rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .45rem; border-radius: 99px; font-family: var(--heading); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.clan-crown-badge .icon { width: 1.5rem; height: 1.5rem; }
.clan-crown-badge.gold { color: #2a1b06; background: linear-gradient(180deg, #fff2b0, #e6b93f 55%, #9a7314); border: 1px solid #fff0b0; box-shadow: 0 0 0 1px #6b4c0c, 0 0 16px rgba(255, 210, 90, .8); animation: crown-glow 2.6s ease-in-out infinite; }
.clan-crown-badge.silber { color: #262b33; background: linear-gradient(180deg, #ffffff, #c9ced6 55%, #7c8794); border: 1px solid #fff; box-shadow: 0 0 0 1px #59626e, 0 0 10px rgba(220, 230, 245, .55); }
.clan-crown-badge.big { position: static; padding: .5rem; }
.clan-crown-badge.big .icon { width: 2rem; height: 2rem; }
@keyframes crown-glow { 0%, 100% { box-shadow: 0 0 0 1px #6b4c0c, 0 0 10px rgba(255, 210, 90, .55); } 50% { box-shadow: 0 0 0 1px #6b4c0c, 0 0 24px rgba(255, 210, 90, 1); } }
@media (prefers-reduced-motion: reduce) { .clan-crown-badge.gold { animation: none; } }
.crown-mini { display: inline-grid; place-items: center; margin-left: .35rem; vertical-align: -3px; }
.crown-mini .icon { width: 1.05rem; height: 1.05rem; }
.crown-mini.gold { color: #c99a1c; filter: drop-shadow(0 0 3px rgba(255, 210, 90, .8)); }
.crown-mini.silber { color: #8a94a1; }
.crown-holder { display: flex; align-items: center; gap: .9rem; justify-content: center; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 220, 120, .25), rgba(255, 250, 235, .6), rgba(255, 220, 120, .25)); border: 1px solid #c9a227; text-align: left; }
.crown-holder small { display: block; color: var(--ink-soft); }
.crown-holder strong { font-family: var(--heading); font-size: 1.15rem; }
.crown-empty { font-style: italic; color: var(--ink-soft); }
.crown-mine { display: flex; align-items: center; gap: .4rem; justify-content: center; margin: 0; padding: .5rem .8rem; border-radius: 10px; font-weight: 700; }
.crown-mine.gold { background: rgba(255, 220, 120, .35); color: #6b4c0c; }
.crown-mine.silber { background: rgba(200, 206, 214, .45); color: #3e4652; }
.crown-history { width: 100%; max-width: 40rem; text-align: left; }
.crown-history ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.crown-gm { width: 100%; max-width: 40rem; padding-top: .8rem; border-top: 1px dashed var(--line); text-align: left; }
.crown-gm .actions { align-items: flex-end; }
.soon .ray { animation: crown-ray 5s ease-in-out infinite; }
.soon .halo { transform-box: fill-box; transform-origin: center; animation: ally-oath 3.4s ease-in-out infinite; }
.soon .crown-float { animation: crown-float 4s ease-in-out infinite; }
@keyframes crown-ray { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes crown-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Kronen-Reihe oben rechts (ändert das Layout nicht) */
.clan-crowns { position: absolute; top: .45rem; right: .6rem; z-index: 3; display: flex; align-items: center; gap: .2rem; pointer-events: auto; }
.crown-icon { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.crown-icon .icon { width: 1.1rem; height: 1.1rem; }
.crown-icon.silber { color: #2b313a; background: radial-gradient(circle at 35% 30%, #ffffff, #c9ced6 60%, #7c8794); box-shadow: 0 0 0 1px #59626e, 0 0 6px rgba(220, 230, 245, .5); }
.crown-icon.gold { width: 2.1rem; height: 2.1rem; color: #2a1b06; background: radial-gradient(circle at 35% 30%, #fff6c8, #e6b93f 60%, #9a7314); box-shadow: 0 0 0 1px #6b4c0c, 0 0 14px rgba(255, 210, 90, .85); animation: crown-glow 2.6s ease-in-out infinite; }
.crown-icon.gold .icon { width: 1.3rem; height: 1.3rem; }
.crown-more { margin: 0 .15rem; font-family: var(--heading); color: #e3e7ee; text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { .crown-icon.gold { animation: none; } }
.crown-mini-row { display: inline-flex; gap: .1rem; margin-left: .35rem; vertical-align: -2px; }
.crown-mini-row .crown-icon { width: 1.05rem; height: 1.05rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.crown-mini-row .crown-icon .icon { width: .7rem; height: .7rem; }
.crown-mini-row .crown-icon.gold { width: 1.2rem; height: 1.2rem; box-shadow: 0 0 0 1px #6b4c0c, 0 0 6px rgba(255, 210, 90, .8); animation: none; }
.crown-mini-row .crown-icon.gold .icon { width: .8rem; height: .8rem; }
.crown-mini-row .crown-more { color: var(--ink-soft); text-shadow: none; font-size: .7rem; }
.crown-mine { flex-direction: column; text-align: center; }
.crown-mine p { margin: .2rem 0 0; }
.crown-tab-row { display: inline-flex; gap: .3rem; align-items: center; }
.crown-tab-row .crown-icon { width: 2.4rem; height: 2.4rem; }
.crown-tab-row .crown-icon .icon { width: 1.5rem; height: 1.5rem; }
.crown-tab-row .crown-icon.gold { width: 2.9rem; height: 2.9rem; }
.crown-tab-row .crown-icon.gold .icon { width: 1.8rem; height: 1.8rem; }
.crown-tab-row .crown-more { color: var(--ink-soft); text-shadow: none; }
.crown-history ul { list-style: none; padding-left: 0; display: grid; gap: .3rem; }
.crown-history li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.crown-icon.tiny { width: 1.2rem; height: 1.2rem; animation: none; }
.crown-icon.tiny .icon { width: .75rem; height: .75rem; }

/* Glocke: gebündelte Clan-Neuigkeiten */
.notif-panel li.cat-clan { border-left-color: #2f5aa8; }
.notif-chip.cat-clan { border-color: #2f5aa8; }
.notif-group { cursor: pointer; }
.notif-group-head { display: grid; gap: .1rem; }
.notif-group-head strong { font-family: var(--heading); color: #1f3b7a; }
.notif-group-head .notif-msg { color: var(--ink-soft); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-group-more { font-size: .78rem; color: var(--blood); }
.notif-group-list { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .4rem; border-left: 2px solid rgba(47, 90, 168, .35); }
.notif-group-list li { font-size: .9rem; }

/* Clan-Reiter: „Mehr“ */
.clan-more { position: relative; }
.clan-more > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 99px; cursor: pointer; font-family: var(--heading); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--parchment-dark); background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 39, .35); }
.clan-more > summary::-webkit-details-marker { display: none; }
.clan-more > summary .icon { width: 15px; height: 15px; }
.clan-more.active > summary { color: #1d130b; background: linear-gradient(180deg, #f3d67a, #c9a227); border-color: var(--gold-dark); }
.clan-more-caret { font-style: normal; font-size: .7rem; }
.clan-more-menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 20; display: grid; gap: .3rem; min-width: 13rem; padding: .5rem; border-radius: 12px; background: #24170d; border: 1px solid rgba(201, 162, 39, .5); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.clan-more-menu a { justify-content: flex-start; }
@media (max-width: 600px) { .clan-more-menu { left: auto; right: 0; } }

/* Königskrone sitzt über dem Lorbeer (eigenes Element statt ::after) */
.fx-crown-top { position: absolute; top: -1.15rem; left: 50%; z-index: 4; transform: translateX(-50%); font-size: 1.7rem; line-height: 1; color: #ffd36b; text-shadow: 0 0 8px rgba(255, 211, 107, .85), 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
:is(.fx-lorbeer_gold, .fx-lorbeer_silber, .fx-lorbeer_bronze) .fx-crown-top { top: -1.25rem; }

/* Clanliste: Kronen neben dem Namen, Sortierung */
.clan-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem; }
.clan-name-row .crown-mini-row { margin-left: 0; }
.clan-sort { display: flex; justify-content: flex-end; margin: -.3rem 0 .5rem; }
.clan-sort label { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink-soft); }
.clan-sort select { padding: .2rem .4rem; }
.clan-page > .clan-tabs, .clan-bg-siegerhalle > .clan-tabs { z-index: 6; }
.crown-more.only-mobile { display: none; }
@media (max-width: 600px) {
  .clan-crowns { top: .5rem; right: .5rem; }
  .clan-crowns .crown-icon.silber ~ .crown-icon.silber { display: none; }
  .clan-crowns .crown-more.only-mobile { display: inline; }
}
.clan-sort label span { white-space: nowrap; }

/* ==== Clan-Shop ==== */
.shop-head { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.shop-head h2 { margin-top: 0; }
.shop-purse { display: grid; place-items: center; min-width: 9rem; padding: .8rem 1rem; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #fff2b8, #e6b93f 70%, #9a7314); border: 1px solid #6b4c0c; box-shadow: 0 0 14px rgba(255, 210, 90, .5); color: #2a1b06; text-align: center; }
.shop-purse small { font-family: var(--heading); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.shop-purse strong { font-family: var(--heading); font-size: 2rem; line-height: 1.1; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem; margin-top: .5rem; }
.shop-offer { display: flex; flex-direction: column; gap: .3rem; padding: .65rem .75rem; border-radius: 10px; background: rgba(255, 250, 235, .7); border: 1px solid var(--line); border-top: 3px solid var(--rc, #c9a227); }
.shop-offer header { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; }
.shop-offer small { color: var(--ink-soft); flex: 1; }
.shop-offer.owned { opacity: .7; border-top-color: #2f7a3d; }
.shop-offer.owned em { color: #2f7a3d; font-style: normal; font-weight: 700; font-size: .85rem; }
.shop-buy { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .2rem; }
.shop-cost { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--heading); font-weight: 700; color: #8a6512; }
.shop-cost .icon { width: 1rem; height: 1rem; }
.shop-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.shop-page { display: grid; gap: 1rem; }
.shop-page > .card { margin: 0; }

/* ==== Clan-Statistik (eine Reihe je Diagramm, Gold als einzige Datenfarbe) ==== */
.stats-page { position: relative; display: grid; gap: 1rem; }
.stats-page .grid { margin: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: .6rem; }
.stat-tile { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: 12px; background: linear-gradient(180deg, #fff8e4, #f1e2bb); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.stat-tile small { font-family: var(--heading); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stat-tile strong { font-family: var(--heading); font-size: 1.5rem; color: var(--ink); line-height: 1.15; }
.stat-tile span { font-size: .8rem; color: var(--ink-soft); }
.chart-bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 4px; height: 200px; padding: 1.2rem 0 0; border-bottom: 1px solid rgba(110, 78, 38, .35); }
.chart-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; outline: none; cursor: default; }
.chart-col:hover .chart-bar, .chart-col:focus .chart-bar { filter: brightness(1.12); }
.chart-bar { display: block; width: min(70%, 28px); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #e2b74a, #a77d1e); }
.chart-col.now .chart-bar { background: linear-gradient(180deg, #c9a227, #6b4c0c); box-shadow: 0 0 0 2px rgba(255, 250, 235, .9), 0 0 0 3px #6b4c0c; }
.chart-val { font-size: .72rem; font-weight: 700; color: var(--ink); min-height: 1rem; }
.chart-x { position: absolute; bottom: -1.3rem; font-size: .62rem; color: var(--ink-soft); white-space: nowrap; }
.card .chart-bars { margin-bottom: 1.6rem; }
.chart-table { margin-top: .4rem; font-size: .85rem; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.chart-table th, .chart-table td { padding: .2rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.chart-line-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .2rem .4rem; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: var(--ink-soft); text-align: right; }
.chart-line { width: 100%; height: 180px; overflow: visible; }
.chart-axis { stroke: rgba(110, 78, 38, .35); stroke-width: 1; }
.chart-area { fill: rgba(201, 162, 39, .18); }
.chart-stroke { fill: none; stroke: #a77d1e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-dot { fill: #e2b74a; stroke: #fff8e4; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: default; }
.chart-dot.now { fill: #6b4c0c; }
.chart-line-x { grid-column: 2; display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-soft); }
.chart-tip { position: absolute; z-index: 10; transform: translate(-50%, -100%); padding: .3rem .55rem; border-radius: 6px; background: #24170d; color: #f3e2b0; font-size: .8rem; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin-bottom: .6rem; }
.seg-toggle button { padding: .3rem .8rem; font: inherit; font-size: .85rem; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.seg-toggle button.on { background: #c9a227; color: #1d130b; font-weight: 700; }
.member-bars, .season-trend { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mb-head { display: flex; justify-content: space-between; gap: .5rem; }
.mb-track { height: 10px; margin: .2rem 0; border-radius: 99px; background: rgba(110, 78, 38, .15); overflow: hidden; }
.mb-track span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a77d1e, #e2b74a); }
.member-bars small, .season-trend small { color: var(--ink-soft); font-size: .8rem; }
.season-trend li { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: center; }
.season-trend li small { display: block; }
.season-trend li.place-1 .season-place { background: radial-gradient(circle at 35% 30%, #fff2b0, #d4a52a 60%, #8a6512); color: #2a1b10; }
.season-trend li.place-2 .season-place { background: radial-gradient(circle at 35% 30%, #fff, #c7ccd4 60%, #7c8794); }
.season-trend li.place-3 .season-place { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c27a3a 60%, #7a4318); }
@media (max-width: 600px) { .chart-x { font-size: .5rem; } .chart-bars { gap: 2px; } }
@media (max-width: 600px) { .chart-col:nth-child(even) .chart-x { display: none; } }

/* ==== Finalkill ==== */
.fx-finalkill { display: grid; place-items: center; align-content: center; gap: 1rem; background: radial-gradient(ellipse at center, rgba(40, 6, 6, .82), rgba(0, 0, 0, .94) 70%); overflow: hidden; }
.fk-stage { position: relative; width: min(46vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.fk-art, .fk-ghost, .fk-shard { position: absolute; inset: 0; display: grid; place-items: center; }
.fk-figure { width: 100%; height: 100%; display: grid; place-items: center; }
.fk-figure > svg, .fk-figure .creature-art, .fk-figure svg { width: 100%; height: 100%; }
.fk-figure .portrait, .fk-figure img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }
.fk-figure .portrait { display: grid; place-items: center; font-size: 4rem; }
.fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s ease-in-out both; }
@keyframes fk-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fk-hit { 0%, 100% { transform: translate(0); } 20% { transform: translate(-10px, 4px) rotate(-3deg); } 50% { transform: translate(9px, -5px) rotate(2deg); } 75% { transform: translate(-5px, 2px); } }
.fk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fk-flash .45s .3s ease-out both; pointer-events: none; }
@keyframes fk-flash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.fk-slash { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 6px; margin: -3px 0 0 -70vmax; transform: rotate(-24deg) scaleX(0); background: linear-gradient(90deg, transparent, #fff 45%, #ffdfa0 55%, transparent); box-shadow: 0 0 24px #ffd27a; animation: fk-slash .5s .25s cubic-bezier(.7, 0, .2, 1) both; pointer-events: none; }
@keyframes fk-slash { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }
.fk-title { position: relative; display: grid; justify-items: center; gap: .15rem; text-align: center; color: #f3e2b0; animation: fk-title .6s .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.fk-kicker { font-family: var(--heading); font-size: clamp(2.2rem, 8vw, 4.4rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, #fff6d0, #e6b93f 55%, #8e1b18); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 120, 60, .7)); }
.fk-title strong { font-family: var(--heading); font-size: 1.4rem; color: #fff; }
.fk-title small { font-style: italic; color: #e3c88a; }
@keyframes fk-title { from { transform: scale(2.2); opacity: 0; letter-spacing: .4em; } to { transform: scale(1); opacity: 1; } }
.fk-still .fk-title { animation: none; }
.fx-finalkill .fx-particles { position: absolute; inset: 0; pointer-events: none; }
.fx-finalkill .fx-particles i { position: absolute; display: block; opacity: 0; animation-fill-mode: both; }
/* Zu Staub zerfallen */
.fk-zerfall .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-dust-out 1.4s .9s ease-in forwards; }
@keyframes fk-dust-out { to { opacity: 0; filter: blur(6px) grayscale(1) brightness(.6); transform: translateY(-12px) scale(1.05); } }
.fk-dust i { width: 6px; height: 6px; border-radius: 50%; background: #b9a58a; animation: fk-rise 1.6s ease-out; transform: scale(var(--s)); }
@keyframes fk-rise { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), -120px) scale(calc(var(--s) * .3)); } }
/* Zerschmettern & Vereisen: Splitter fliegen auseinander */
.fk-shards { position: absolute; inset: 0; }
.fk-shard { opacity: 0; }
.fk-zerschmettern .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-hide .01s 1s forwards; }
.fk-zerschmettern .fk-shard { animation: fk-shard 1.8s 1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes fk-shard { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
@keyframes fk-hide { to { opacity: 0; } }
.fk-vereisen .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-freeze .7s .5s ease-out forwards, fk-hide .01s 1.5s forwards; }
@keyframes fk-freeze { to { filter: saturate(.2) brightness(1.5) hue-rotate(170deg) drop-shadow(0 0 12px #9fe6ff); } }
.fk-vereisen .fk-shard { filter: saturate(.2) brightness(1.5) hue-rotate(170deg) drop-shadow(0 0 8px #bff0ff); animation: fk-shard 1.7s 1.5s cubic-bezier(.2, .7, .3, 1) both; }
.fk-frost i { width: 9px; height: 9px; background: #dff7ff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: fk-rise 1.8s ease-out; }
/* Verbrennen */
.fk-verbrennen .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-burn 1.8s .8s ease-in forwards; }
@keyframes fk-burn { 30% { filter: brightness(1.3) sepia(1) saturate(4) hue-rotate(-20deg) drop-shadow(0 0 20px #ff7a1a); } 70% { filter: brightness(.25) drop-shadow(0 0 16px #ff4d1a); opacity: 1; } 100% { filter: brightness(0); opacity: 0; transform: translateY(14px) scaleY(.85); } }
.fk-flames i { width: 18px; height: 28px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff3b0, #ff9a2a 45%, rgba(255, 60, 20, 0) 75%); filter: blur(1px); animation: fk-flame 1.4s ease-out; }
@keyframes fk-flame { 0% { opacity: 0; transform: translateY(20px) scale(var(--s)); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -130px) scale(calc(var(--s) * .4)); } }
/* Blitz */
.fk-bolt { position: absolute; left: 50%; top: -60%; width: 34%; margin-left: -17%; height: 120%; opacity: 0; filter: drop-shadow(0 0 16px #bfe4ff); animation: fk-bolt .5s .6s ease-out both; }
@keyframes fk-bolt { 0% { opacity: 0; transform: translateY(-40%); } 30% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; } 100% { opacity: 0; } }
.fk-blitz .fk-flash { animation: fk-flash .45s .3s ease-out both, fk-flash .5s .7s ease-out both; }
.fk-blitz .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-zap 1.6s .75s ease-in forwards; }
@keyframes fk-zap { 0% { filter: brightness(3) drop-shadow(0 0 20px #bfe4ff); } 25% { filter: brightness(.15); } 100% { filter: brightness(0); opacity: 0; transform: scale(.92); } }
.fk-sparks i { width: 3px; height: 14px; background: #e6f6ff; box-shadow: 0 0 8px #9fd2ff; animation: fk-rise 1s ease-out; }
/* Seele steigt auf */
.fk-seele .fk-art { animation: fk-in .35s cubic-bezier(.2, 1.4, .4, 1) both, fk-hit .35s .35s both, fk-pale 1.6s .9s ease-in forwards; }
@keyframes fk-pale { to { filter: grayscale(1) brightness(.4); opacity: .25; } }
.fk-ghost { opacity: 0; filter: grayscale(1) brightness(2.2) blur(1px) drop-shadow(0 0 18px #cfe6ff); animation: fk-ghost 2s 1s ease-out both; }
@keyframes fk-ghost { 0% { opacity: 0; transform: translateY(0) scale(1); } 25% { opacity: .75; } 100% { opacity: 0; transform: translateY(-160px) scale(1.15); } }
.fk-wisps i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ffffff, rgba(170, 210, 255, 0) 70%); animation: fk-rise 2s ease-out; }
@media (prefers-reduced-motion: reduce) { .fx-finalkill * { animation: none !important; } }

/* ==== NSC-Spieler ==== */
.token.npc-hero .token-art { box-shadow: 0 0 0 3px #4a2a6a, 0 0 14px rgba(150, 90, 220, .55); border-radius: 50%; }
.token-npc { position: absolute; top: .3rem; right: .3rem; z-index: 2; padding: .05rem .4rem; border-radius: 99px; font-size: .62rem; font-family: var(--heading); letter-spacing: .04em; color: #f3e2ff; background: #4a2a6a; border: 1px solid #b892e6; }
.arena-npc { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; width: 100%; padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px dashed rgba(201, 162, 39, .35); }
.arena-npc > small { font-family: var(--heading); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: #e3c88a; }
.arena-npc select { width: auto; max-width: 100%; }
.arena-npc .check { color: #f3e2b0; font-size: .85rem; }
.fighter-fx { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .8rem; color: var(--ink-soft); }
.fighter-fx select { width: auto; flex: 1; min-width: 0; font-size: .8rem; padding: .15rem .3rem; }
.fx-pick { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.fx-pick .field { flex: 1 1 14rem; margin: 0; }
.npc-sheet { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.npc-portrait-box { display: grid; justify-items: center; gap: .5rem; }
.npc-row .portrait { flex: none; }
.npc-row .cat-name small { color: var(--ink-soft); }
@media (max-width: 600px) { .npc-sheet { grid-template-columns: 1fr; justify-items: center; } }
/* Finalkill: Lichtkreis hinter der Figur, damit dunkle Silhouetten und Splitter sichtbar sind */
.fk-stage { width: min(56vw, 300px); }
.fk-stage::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 160, .55), rgba(255, 170, 90, .18) 55%, transparent 72%); animation: fk-in .4s ease-out both; }
.fk-shard .fk-figure, .fk-art .fk-figure { filter: drop-shadow(0 0 2px rgba(255, 230, 170, .9)) drop-shadow(0 0 10px rgba(255, 180, 90, .35)); }
.fk-zerschmettern .fk-stage::before, .fk-vereisen .fk-stage::before, .fk-blitz .fk-stage::before, .fk-zerfall .fk-stage::before, .fk-seele .fk-stage::before, .fk-verbrennen .fk-stage::before { animation: fk-in .4s ease-out both, fk-glow-out 1.2s 1.6s ease-in forwards; }
.fk-vereisen .fk-stage::before { background: radial-gradient(circle, rgba(200, 240, 255, .6), rgba(120, 190, 255, .2) 55%, transparent 72%); }
.fk-seele .fk-stage::before { background: radial-gradient(circle, rgba(220, 235, 255, .5), rgba(150, 180, 255, .16) 55%, transparent 72%); }
@keyframes fk-glow-out { to { opacity: .25; } }
.fk-dust i { background: #e8d5b0; box-shadow: 0 0 4px rgba(255, 230, 180, .6); }