/* =========================================================
   Devils Lair – gothic.css
   Cybersigilism / Gothic · Schwarz, Blutrot, Chrom-Silber
   Wird NACH base/layout/components/pages und VOR seasons.css geladen.
   Farben/Tokens stehen in base.css (:root). Zum Abschalten: <link> in partials/layout.html entfernen.
   Bilder (aus Downloads\Design): blood-moon.jpg, devil.jpg, chrome-sigil.jpg, chrome-flow.jpg, og.jpg
   ========================================================= */

/* ---------- Chrom-Ornamente seitlich (fixiert, additiv auf Schwarz) ---------- */
.orn { position: fixed; top: 0; height: 100vh; width: min(30vw, 480px); max-width: none; object-fit: cover; object-position: center top;
  pointer-events: none; z-index: -2; mix-blend-mode: screen; opacity: .3; animation: orn-breathe 9s ease-in-out infinite; }
.orn-l { left: 0; transform: scaleX(-1); /* gleiches Bild wie rechts, gespiegelt (Maske wird mitgespiegelt) */ -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent); mask-image: linear-gradient(270deg, #000 25%, transparent); }
.orn-r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent); mask-image: linear-gradient(270deg, #000 25%, transparent); animation-delay: -4.5s; }
@keyframes orn-breathe { 0%, 100% { opacity: .2; } 50% { opacity: .36; } }
@media (max-width: 820px) { .orn { width: 78vw; opacity: .16; animation: none; } }

/* ---------- Navigation ---------- */
.nav { background: linear-gradient(to bottom, rgba(var(--bg-rgb), .95), rgba(var(--bg-rgb), .74)); border-bottom-color: rgba(var(--silver-rgb), .12); }
.nav::after { opacity: .9; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 22%, rgba(var(--silver-rgb), .9) 50%, var(--red) 78%, transparent); }
.brand { color: var(--silver-hi); }
.brand img { box-shadow: 0 0 0 1px var(--silver-lo), 0 0 0 3px #000, 0 0 0 4px var(--red-deep), 0 0 22px rgba(var(--glow-rgb), .6); }
.brand b { color: var(--red-hot); text-shadow: 0 0 16px rgba(var(--hot-rgb), .65); }
.menu a:not(.btn) { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.menu a:not(.btn):hover { color: var(--silver-hi); text-shadow: 0 0 14px rgba(var(--silver-rgb), .55); }
.menu a[aria-current="page"] { color: var(--silver-hi); }
.menu a[aria-current="page"]::after { height: 2px; background: linear-gradient(90deg, transparent, var(--red-hot), transparent); box-shadow: 0 0 12px var(--red); }
.menu-toggle { border-radius: 0; border-color: rgba(var(--silver-rgb), .25); }

/* ---------- Buttons: abgeschnittene Ecken ---------- */
.btn { --cut: 12px; border-radius: 0; border: 0; font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 14px 26px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn-sm { --cut: 8px; padding: 10px 18px; font-size: .72rem; }
.btn-primary { background: linear-gradient(180deg, var(--red-hot), var(--red) 52%, var(--red-deep)); text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .38); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.18) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-ghost { background: rgba(var(--silver-rgb), .04); color: var(--silver-hi); box-shadow: inset 0 0 0 1px rgba(var(--silver-rgb), .34); }
.btn-ghost:hover { background: rgba(var(--glow-rgb), .16); box-shadow: inset 0 0 0 1px var(--red-hot); transform: translateY(-2px); }

/* ---------- Ueberschriften in Chrom ---------- */
.section-head h2, .prose h2, .discord-card .body h2, .page-head h1, .online-box h3, .social h2 {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .65)); }
.page-head h1 em { -webkit-text-fill-color: var(--red-hot); color: var(--red-hot); text-shadow: 0 0 30px rgba(var(--hot-rgb), .55); }

.kicker { color: var(--silver); font-size: .74rem; letter-spacing: .34em; }
.kicker::before { width: 46px; height: 9px; box-shadow: none; background: linear-gradient(90deg, var(--red-deep), var(--red-hot));
  clip-path: polygon(0 50%, 100% 0, 86% 50%, 100% 100%); }

/* ---------- Hero ---------- */
.hero::before { content: ""; position: absolute; inset: -60px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 560px at 76% 46%, rgba(var(--glow-rgb), .30), transparent 70%); }
.hero h1 { background: var(--chrome); background-size: 100% 52%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 28px rgba(var(--glow-rgb), .28)); }
.hero h1 span { -webkit-text-fill-color: var(--red-hot); color: var(--red-hot); }
.hero .tagline { color: var(--silver); text-shadow: 0 0 26px rgba(var(--glow-rgb), .4); }

/* Sigil: Blutmond mit Teufelssilhouette, umgeben von Chrom-Ring, Dornen und rotem Pentagramm */
.sigil svg { overflow: visible; filter: drop-shadow(0 0 9px rgba(var(--silver-rgb), .32)); animation-duration: 140s; }
.sg-dots, .sg-ring { stroke: var(--silver); }
.sg-blades { fill: rgba(var(--silver-rgb), .16); stroke: var(--silver); stroke-width: .8; }
.sg-small { opacity: .65; }
.sg-star { stroke: var(--red); filter: drop-shadow(0 0 5px rgba(var(--hot-rgb), .95)); }
.sigil img { object-position: 45% 50%;
  box-shadow: 0 0 0 1px var(--silver), 0 0 0 6px #000, 0 0 0 7px rgba(var(--silver-rgb), .4), 0 0 100px rgba(var(--glow-rgb), .7); }

/* ---------- Trenner mit Dornen-Ornament ---------- */
.divider { height: 22px; background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='22' viewBox='0 0 132 22'><g fill='none' stroke='%23c8ced8' stroke-width='1.1' stroke-linecap='round'><path d='M66 3 73 11 66 19 59 11Z' fill='%23d1001c' stroke='%23ff1f3a'/><path d='M57 11C48 11 45 5 34 5S16 10 3 11'/><path d='M57 11C48 11 45 17 34 17S16 12 3 11'/><path d='M75 11C84 11 87 5 98 5S116 10 129 11'/><path d='M75 11C84 11 87 17 98 17S116 12 129 11'/></g></svg>") center / 132px 22px no-repeat,
  linear-gradient(90deg, transparent, rgba(var(--silver-rgb), .34) 22%, transparent 41%, transparent 59%, rgba(var(--silver-rgb), .34) 78%, transparent) center / 100% 1px no-repeat; }

/* ---------- Seitenkopf / Sektionen ---------- */
.page-head p, .section-head p { color: var(--ash); }

/* ---------- Karten & Panels: Eck-Klammern statt runder Ecken ---------- */
.card, .panel { border-radius: 0; border-color: rgba(var(--silver-rgb), .12);
  background:
    linear-gradient(var(--accent, var(--red)), var(--accent, var(--red))) right bottom / 40px 2px no-repeat,
    linear-gradient(var(--accent, var(--red)), var(--accent, var(--red))) right bottom / 2px 40px no-repeat,
    linear-gradient(180deg, rgba(15, 15, 21, .84), rgba(6, 6, 9, .9));
  box-shadow: inset 0 1px 0 rgba(var(--silver-rgb), .07); }
.card::after { left: -1px; top: -1px; width: 56px; }
.card:hover { box-shadow: inset 0 1px 0 rgba(var(--silver-rgb), .1), 0 24px 60px -34px var(--accent); }
.card-icon { border-radius: 2px; }
.card h3 { color: var(--silver-hi); }

/* Farbakzente im Thema halten (Fraktionsfarben bleiben nur bei Reichen/NPCs) */
.card.accent-erde, .card.accent-events, .card.accent-discord { --accent: var(--silver); }
.card.accent-tiktok { --accent: var(--red-hot); }
[data-module="topics"] .card:nth-child(odd) { --accent: var(--red) !important; }
[data-module="topics"] .card:nth-child(even) { --accent: var(--silver) !important; }

/* ---------- Kennzahlen ---------- */
.stats { border-radius: 0; background: rgba(var(--silver-rgb), .13); border-color: rgba(var(--silver-rgb), .16);
  box-shadow: 0 30px 80px -52px rgba(var(--glow-rgb), .8); }
.stat { background: linear-gradient(180deg, rgba(11, 11, 16, .95), rgba(4, 4, 6, .97)); }
.stat b { color: var(--silver-hi); }

/* ---------- Kleinteile ---------- */
.pill, .role-badge, .realm-detail .tag { border-radius: 2px; }
.pill { border-color: rgba(var(--silver-rgb), .2); }
.addr { border-radius: 0; border-color: rgba(var(--silver-rgb), .24); background: rgba(0, 0, 0, .55); }
.addr small { color: var(--silver-lo); }
.addr button { color: var(--silver-hi); }
.tabs { border-radius: 0; border-color: rgba(var(--silver-rgb), .18); }
.tab { border-radius: 0; font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.srv-nums div, .player, .person, .world, .steps li, .note, .empty, .map-frame, .realm-detail, .season-pop, .discord-card { border-radius: var(--radius); }
.steps li::before { width: 46px; height: 46px; border: 0; border-radius: 0; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); box-shadow: none;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.note { border-color: rgba(var(--silver-rgb), .2); border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(var(--glow-rgb), .12), rgba(var(--glow-rgb), .02)); }
.person { border-color: rgba(var(--silver-rgb), .12); }
.legal h2 { color: var(--silver-hi); }
.link-red, .legal a { color: var(--red-hot); }

/* Reiche-Pentagramm: Ring in Silber, Mitte in Chrom */
.realm-ring { stroke: var(--silver); opacity: .4; }
.realm-core { fill: var(--silver-hi); stroke: var(--red-deep); }
.realm-detail { background: linear-gradient(180deg, rgba(15, 15, 21, .86), rgba(6, 6, 9, .92)); }

/* ---------- Discord-Karte mit Teufelssilhouette ---------- */
.discord-card { border-color: rgba(var(--silver-rgb), .2); border-top: 2px solid var(--red);
  background: linear-gradient(180deg, rgba(10, 10, 14, .96), rgba(4, 4, 6, .98)); box-shadow: 0 34px 90px -44px rgba(var(--glow-rgb), .85); }
.discord-card .art { min-height: 300px; }
.discord-card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.widget-box iframe { border-radius: var(--radius); }
.discord-card .art::after { background: linear-gradient(90deg, transparent 45%, rgba(4, 4, 6, .98)); }
@media (max-width: 800px) { .discord-card .art::after { background: linear-gradient(180deg, transparent 45%, rgba(4, 4, 6, .98)); } }

/* ---------- Footer: Chrom-Sigil im Hintergrund ---------- */
.foot { isolation: isolate; border-top-color: rgba(var(--silver-rgb), .12); background: linear-gradient(to bottom, transparent, rgba(var(--dark-rgb), .32)); }
.foot::before { height: 1px; opacity: .9; background: linear-gradient(90deg, transparent, var(--red) 25%, rgba(var(--silver-rgb), .9) 50%, var(--red) 75%, transparent); }
.foot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: screen;
  background: url("/assets/img/chrome-sigil.jpg") center bottom / 340px auto repeat-x;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.foot-name { color: var(--silver-hi); }
.foot-name b { text-shadow: 0 0 16px rgba(var(--hot-rgb), .6); }
.foot h2 { color: var(--silver-lo); }
.foot li a:hover { color: var(--silver-hi); }

/* ---------- 404 ---------- */
.e404 h1 { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 50px rgba(var(--glow-rgb), .55)); }
.e404 .tagline { color: var(--silver); }