/* ═══════════════════════════════════════════════════════════
   NEXUS TCG – Design System
   Fonts: Orbitron · Rajdhani · Share Tech Mono
   
   ÜBERARBEITET: Exakt basierend auf nexus_ki_unified.html
   Kartengröße: 380×532px (UPGRADED SIZE)
   Rarity Gems: SVG Diamond Icons (UPGRADED!)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Variables ── */
:root {
  /* Backgrounds */
  --bg:       #07090e;
  --bg-2:     #0e1118;
  --bg-3:     #161a22;
  --border:   rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,.12);

  /* Factions */
  --ki:        #378ADD;
  --ki-l:      #A8CFEF;
  --ki-d:      #0C447C;
  --ki-bg:     #091e3a;
  --mil:       #A03020;
  --mil-l:     #f08878;
  --mil-bg:    #1a0a08;
  --wid:       #3D6E10;
  --wid-l:     #88c850;
  --wid-bg:    #0a1508;
  --sch:       #7B72D8;
  --sch-l:     #b0acf8;
  --sch-bg:    #0f0e1a;

  /* Gold / Promo */
  --gold:     #C49A1F;
  --gold-l:   #F5D060;
  --gold-d:   #7a5e0a;

  /* Text */
  --t1: #eae8e0;
  --t2: #888780;
  --t3: rgba(255,255,255,.25);

  /* Card dimensions - UPGRADED SIZE */
  --cw: 380px;
  --ch: 532px;

  /* Nav height */
  --nav-h: 72px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Noise overlay on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Typography ── */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-mono     { font-family: 'Share Tech Mono', monospace; }
.font-raj      { font-family: 'Rajdhani', sans-serif; }

h1, h2, h3 { font-family: 'Orbitron', sans-serif; font-weight: 900; }

/* ── Grid / Layout ── */
.container { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: stretch;
  background: rgba(4,6,11,.94);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(196,154,31,.07), 0 4px 40px rgba(0,0,0,.6);
}

.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 0;
  padding-right: 36px;
  border-right: 1px solid rgba(255,255,255,.07);
  transition: opacity .2s;
}
.nav-logo:hover { opacity: .85; }

.nav-links {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  padding-left: 8px;
}

.nav-link {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 24px;
  color: rgba(245,242,232,.42);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: color .18s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav-link:hover {
  color: rgba(245,242,232,.88);
}
.nav-link.active {
  color: rgba(245,242,232,.95);
  border-bottom-color: var(--gold);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 24px; right: 24px;
  height: 2px;
  background: rgba(245,242,232,.2);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-link:hover:not(.active)::after {
  transform: scaleX(1);
}

.nav-link-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  flex-shrink: 0;
}
.nav-link.active .nav-link-dot,
.nav-link:hover .nav-link-dot {
  opacity: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,.07);
}

.nav-set-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

.nav-wp {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  background: linear-gradient(135deg, var(--gold-d), var(--gold), var(--gold-l));
  color: #000;
  padding: 9px 20px;
  border-radius: 3px;
  flex-shrink: 0;
  transition: all .18s;
  white-space: nowrap;
}
.nav-wp:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(196,154,31,.4);
}

/* ── Page wrapper ── */
.page { padding-top: var(--nav-h); }

/* ── Section headers ── */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--t2);
  margin-bottom: 10px;
}
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .08em;
}
.section-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--t2);
  letter-spacing: .16em;
  margin-top: 8px;
}

/* ── Divider ── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin: 0;
}

/* ══════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: url('/images/hero-main.jpg');
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,9,14,.92) 0%, rgba(7,9,14,.65) 50%, rgba(7,9,14,.3) 100%),
    linear-gradient(180deg, rgba(7,9,14,.2) 0%, rgba(7,9,14,.0) 40%, rgba(7,9,14,.7) 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 60px);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero-eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.05;
  background: linear-gradient(135deg, #eae8e0 0%, rgba(234,232,224,.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: rgba(240,237,228,.75);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 12px 28px;
  border-radius: 4px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
}

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
}
.btn-primary:hover {
  background: var(--gold-l);
  border-color: var(--gold-l);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-2);
  color: var(--t1);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,.3);
  background: var(--bg-2);
  transform: translateY(-2px);
}

.btn-faction {
  border-color: var(--faction-color, var(--border-2));
  color: var(--faction-color, var(--t1));
  background: transparent;
}
.btn-faction:hover {
  background: rgba(var(--faction-rgb, 255,255,255), .08);
}

/* ══════════════════════════════════════════════
   CARD COMPONENT - Exakt wie nexus_ki_unified.html
══════════════════════════════════════════════ */

/* ── CARD WRAPPER ── */
.cw {
  width: var(--cw);
  height: var(--ch);
  perspective: 900px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.cw.hide { display: none; }

/* IR Badge on wrapper */
.ir-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 10px;
  border-radius: 2px;
  background: rgba(196,154,31,0.2);
  border: 1px solid rgba(196,154,31,0.6);
  color: #EF9F27;
  z-index: 20;
  white-space: nowrap;
  opacity: 1;
  transition: opacity .2s;
}
.cw.has-ir:hover .ir-badge { 
  opacity: 1; 
  background: rgba(196,154,31,0.3);
}

/* ── CARD ── */
.card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .08s ease, box-shadow .3s;
  overflow: hidden;
  will-change: transform;
}

/* ── RARITY BOX SHADOWS (Original aus unified) ── */
.rB {
  box-shadow: 0 0 0 1px rgba(136,135,128,.3), 0 8px 24px rgba(0,0,0,.7);
}
.rE {
  box-shadow: 0 0 0 1px rgba(29,158,117,.45), 0 8px 24px rgba(0,0,0,.7), 0 0 16px rgba(29,158,117,.1);
}
.rS {
  box-shadow: 0 0 0 1.5px rgba(55,138,221,.55), 0 8px 24px rgba(0,0,0,.7), 0 0 20px rgba(55,138,221,.15);
}
.rP {
  box-shadow: 0 0 0 1.5px rgba(127,119,221,.65), 0 8px 24px rgba(0,0,0,.7), 0 0 28px rgba(127,119,221,.2);
  animation: ep 3s ease-in-out infinite;
}
.rL {
  box-shadow: 0 0 0 2px rgba(196,154,31,.85), 0 8px 32px rgba(0,0,0,.7), 0 0 40px rgba(196,154,31,.25);
  animation: lg 2.5s ease-in-out infinite;
}
.rIR {
  box-shadow: 0 0 0 2px rgba(196,154,31,.9), 0 8px 36px rgba(0,0,0,.8), 0 0 50px rgba(196,154,31,.35);
  animation: lg 2s ease-in-out infinite;
}

/* ── PROMO (X) ───────────────────────────────────────────────── */
.rX {
  box-shadow: 0 0 0 2px rgba(0,212,204,.8),
              0 8px 32px rgba(0,0,0,.75),
              0 0 48px rgba(0,212,204,.3);
  animation: promo 3s ease-in-out infinite;
}
@keyframes promo {
  0%,100% { box-shadow: 0 0 0 2px rgba(0,212,204,.8),  0 8px 32px rgba(0,0,0,.75), 0 0 48px rgba(0,212,204,.30); }
  50%      { box-shadow: 0 0 0 2px rgba(0,212,204,1.0), 0 8px 40px rgba(0,0,0,.85), 0 0 72px rgba(0,212,204,.50); }
}
/* Gem: Stern-Form in Türkis */
.rX .cgem {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 14.4,9.2 22,9.2 16,13.8 18.4,21 12,16.4 5.6,21 8,13.8 2,9.2 9.6,9.2' fill='rgba(0,212,204,0.18)' stroke='%2300D4CC' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%2300D4CC'/%3E%3C/svg%3E");
}
.rX .foil { opacity: 1 !important; }
.rX .cline { background: linear-gradient(90deg, transparent, rgba(0,212,204,.8), transparent); }
.rX .ccost { color: #00D4CC; border-color: rgba(0,212,204,.6); }
.rX .cname { color: #e0fffe; }
.rX .ctid  { color: rgba(0,212,204,.7); }
.rX .mset  { background: rgba(0,212,204,.15); border-color: rgba(0,212,204,.4); color: #00D4CC; }
.rX .ctxt  { border-color: rgba(0,212,204,.15); background: rgba(0,212,204,.03); }
.rX .stamp, .rX .ceff b { color: #00D4CC; }
.rX .csv   { color: #00D4CC; }

/* Promo "P" Badge – Grid Zone 2, sitzt neben dem Set-Code */
.promo-p-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #00D4CC;
  background: rgba(0,212,204,.12);
  border: .5px solid rgba(0,212,204,.5);
  border-radius: 2px;
  padding: 2px 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 0 6px rgba(0,212,204,.8);
}

@keyframes ep {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(127,119,221,.65), 0 8px 24px rgba(0,0,0,.7), 0 0 28px rgba(127,119,221,.2);
  }
  50% {
    box-shadow: 0 0 0 1.5px rgba(127,119,221,.9), 0 8px 24px rgba(0,0,0,.7), 0 0 44px rgba(127,119,221,.38);
  }
}

@keyframes lg {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(196,154,31,.85), 0 8px 32px rgba(0,0,0,.7), 0 0 40px rgba(196,154,31,.25);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(245,208,96,1), 0 8px 40px rgba(0,0,0,.8), 0 0 60px rgba(245,208,96,.45);
  }
}

/* ── CARD FACE ── */
.cf {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Background gradient */
.cbg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #091e3a 0%, #040b16 100%);
}

.faction-ki .cbg {
  background: radial-gradient(ellipse at 50% 30%, #091e3a 0%, #040b16 100%);
}
.faction-mil .cbg {
  background: radial-gradient(ellipse at 50% 30%, #1a0a08 0%, #07090e 100%);
}
.faction-wid .cbg {
  background: radial-gradient(ellipse at 50% 30%, #0a1208 0%, #07090e 100%);
}
.faction-sch .cbg {
  background: radial-gradient(ellipse at 50% 30%, #120e22 0%, #07090e 100%);
}
.faction-neu .cbg {
  background: radial-gradient(ellipse at 50% 30%, #13100a 0%, #07090e 100%);
}

/* Noise overlay */
.cnoise {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── FOIL ── */
.foil {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .3s;
  background: linear-gradient(105deg,
    rgba(255,0,128,0) 0%,
    rgba(255,0,128,.07) 15%,
    rgba(255,128,0,.05) 30%,
    rgba(255,255,0,.07) 45%,
    rgba(0,255,128,.05) 60%,
    rgba(0,128,255,.07) 75%,
    rgba(128,0,255,.04) 90%,
    rgba(255,0,128,0) 100%
  );
  mix-blend-mode: screen;
}
.cw:hover .rS .foil { opacity: .7; }
.cw:hover .rP .foil { opacity: .9; }
.cw:hover .rL .foil,
.cw:hover .rIR .foil { opacity: 1; }

/* ── INNER LAYOUT ── */
.ci {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── TOP BAR ── */
.ctop {
  display: flex;
  align-items: center;
  padding: 8px 10px 6px;
  gap: 5px;
}

.ccost {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  border: 1.5px solid;
  flex-shrink: 0;
}

.faction-ki .ccost {
  border-color: #378ADD;
  color: #378ADD;
  background: rgba(55,138,221,.12);
}
.faction-mil .ccost {
  border-color: #A03020;
  color: #A03020;
  background: rgba(160,48,32,.12);
}
.faction-wid .ccost {
  border-color: #3D6E10;
  color: #3D6E10;
  background: rgba(61,110,16,.12);
}
.faction-sch .ccost {
  border-color: #7B72D8;
  color: #7B72D8;
  background: rgba(123,114,216,.12);
}
.faction-neu .ccost {
  border-color: #C49A1F;
  color: #C49A1F;
  background: rgba(196,154,31,.12);
}

/* IR-Face Cost - RARITY-SPEZIFISCH! */
.rL .cf.ir-face .ccost,
.rP .cf.ir-face .ccost {
  border-color: rgba(196,154,31,.9);
  color: #F5D060;
  background: rgba(8,4,0,.75);
}
.rS .cf.ir-face .ccost {
  border-color: rgba(55,138,221,.85);
  color: #A8CFEF;
  background: rgba(0,4,18,.75);
}

.cname {
  flex: 1;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #eae8e0;
  padding: 0 4px;
  line-height: 1.2;
}

/* ── RARITY GEM (SVG Icons - UPGRADED!) ── */
.cgem {
  width: 20px;
  height: 20px;
  border-radius: 0;
  transform: none;
  background-color: transparent !important;
  box-shadow: none !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.rB .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwyIDIyLDEyIDEyLDIyIDIsMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODc4MCIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48bGluZSB4MT0iMiIgeTE9IjEyIiB4Mj0iMjIiIHkyPSIxMiIgc3Ryb2tlPSIjODg4NzgwIiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC40NSIvPjwvc3ZnPg==");
}
.rE .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwyIDIyLDEyIDEyLDIyIDIsMTIiIGZpbGw9InJnYmEoMjksMTU4LDExNywwLjE1KSIgc3Ryb2tlPSIjMUQ5RTc1IiBzdHJva2Utd2lkdGg9IjEuOCIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSIyMiIgeTI9IjEyIiBzdHJva2U9IiMxRDlFNzUiIHN0cm9rZS13aWR0aD0iMC45IiBvcGFjaXR5PSIwLjUiLz48bGluZSB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSIyMiIgc3Ryb2tlPSIjMUQ5RTc1IiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC40Ii8+PC9zdmc+");
}
.rS .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwyIDIyLDEyIDEyLDIyIDIsMTIiIGZpbGw9InJnYmEoNTUsMTM4LDIyMSwwLjEyKSIgc3Ryb2tlPSIjMzc4QUREIiBzdHJva2Utd2lkdGg9IjEuOCIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSIyMiIgeTI9IjEyIiBzdHJva2U9IiMzNzhBREQiIHN0cm9rZS13aWR0aD0iMC45IiBvcGFjaXR5PSIwLjUiLz48bGluZSB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSIyMiIgc3Ryb2tlPSIjMzc4QUREIiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC41Ii8+PHBvbHlnb24gcG9pbnRzPSIxMiw3IDE3LDEyIDEyLDE3IDcsMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM3OEFERCIgc3Ryb2tlLXdpZHRoPSIwLjkiIG9wYWNpdHk9IjAuNiIvPjwvc3ZnPg==");
}
.rP .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwyIDIyLDEyIDEyLDIyIDIsMTIiIGZpbGw9InJnYmEoMTI3LDExOSwyMjEsMC4xNSkiIHN0cm9rZT0iIzdGNzdERCIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48bGluZSB4MT0iMiIgeTE9IjEyIiB4Mj0iMjIiIHkyPSIxMiIgc3Ryb2tlPSIjN0Y3N0REIiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC41Ii8+PGxpbmUgeDE9IjEyIiB5MT0iMiIgeDI9IjEyIiB5Mj0iMjIiIHN0cm9rZT0iIzdGNzdERCIgc3Ryb2tlLXdpZHRoPSIwLjkiIG9wYWNpdHk9IjAuNSIvPjxwb2x5Z29uIHBvaW50cz0iMTIsNyAxNywxMiAxMiwxNyA3LDEyIiBmaWxsPSJub25lIiBzdHJva2U9IiM3Rjc3REQiIHN0cm9rZS13aWR0aD0iMC45IiBvcGFjaXR5PSIwLjYiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjIiIHI9IjEuNSIgZmlsbD0iIzdGNzdERCIvPjxjaXJjbGUgY3g9IjIyIiBjeT0iMTIiIHI9IjEuNSIgZmlsbD0iIzdGNzdERCIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMjIiIHI9IjEuNSIgZmlsbD0iIzdGNzdERCIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxMiIgcj0iMS41IiBmaWxsPSIjN0Y3N0REIi8+PC9zdmc+");
}
.rL .cgem,
.rIR .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwwIDEzLjUsNSAyMiwxMiAxMy41LDE5IDEyLDI0IDEwLjUsMTkgMiwxMiAxMC41LDUiIGZpbGw9InJnYmEoMTk2LDE1NCwzMSwwLjE4KSIgc3Ryb2tlPSIjQzQ5QTFGIiBzdHJva2Utd2lkdGg9IjEuOCIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSIyMiIgeTI9IjEyIiBzdHJva2U9IiNDNDlBMUYiIHN0cm9rZS13aWR0aD0iMC45IiBvcGFjaXR5PSIwLjUiLz48bGluZSB4MT0iMTIiIHkxPSIwIiB4Mj0iMTIiIHkyPSIyNCIgc3Ryb2tlPSIjQzQ5QTFGIiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC41Ii8+PHBvbHlnb24gcG9pbnRzPSIxMiw1IDE3LDEyIDEyLDE5IDcsMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M0OUExRiIgc3Ryb2tlLXdpZHRoPSIwLjkiIG9wYWNpdHk9IjAuNiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiIGZpbGw9IiNDNDlBMUYiLz48L3N2Zz4=");
  animation: none !important;
}

/* ── ART ── */
.cart {
  margin: 0 8px;
  height: 188px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: rgba(0,0,0,.25);
}
.cart svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── IR FULL ART ── */
.cf.ir-face .cart {
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  z-index: 0;
}
.cf.ir-face .ci {
  position: relative;
  z-index: 2;
}
.cf.ir-face .ctop {
  padding-top: 8px;
}
.ir-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,11,22,.97) 0%, rgba(4,11,22,.88) 32%, rgba(4,11,22,.25) 58%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.ir-stamp-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1px 7px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 4px;
}

/* IR-Stamp - RARITY-SPEZIFISCH! */
.rL .ir-stamp-badge,
.rP .ir-stamp-badge {
  background: rgba(196,154,31,.2);
  border: .5px solid rgba(196,154,31,.5);
  color: #EF9F27;
}
.rS .ir-stamp-badge {
  background: rgba(55,138,221,.2);
  border: .5px solid rgba(55,138,221,.5);
  color: #A8CFEF;
}

/* ── FACTION LINE ── */
.cline {
  height: 2px;
  margin: 0 8px;
  flex-shrink: 0;
}

.faction-ki .cline {
  background: linear-gradient(90deg, transparent, #378ADD, transparent);
}
.faction-mil .cline {
  background: linear-gradient(90deg, transparent, #A03020, transparent);
}
.faction-wid .cline {
  background: linear-gradient(90deg, transparent, #3D6E10, transparent);
}
.faction-sch .cline {
  background: linear-gradient(90deg, transparent, #7B72D8, transparent);
}
.faction-neu .cline {
  background: linear-gradient(90deg, transparent, #C49A1F, transparent);
}

/* ── TYPE BAR ── */
.ctypebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-size: 9.5px;
}

.cttype {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #888780;
}

.ctid {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
}

.faction-ki .ctid { color: #378ADD; }
.faction-mil .ctid { color: #A03020; }
.faction-wid .ctid { color: #3D6E10; }
.faction-sch .ctid { color: #7B72D8; }
.faction-neu .ctid { color: #C49A1F; }

/* ── TEXT BOX ── */
.ctxt {
  flex: 1;
  margin: 2px 8px;
  padding: 6px 8px 5px;
  border-radius: 4px;
  border: 1px solid;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.faction-ki .ctxt {
  border-color: rgba(55,138,221,.18);
  background: rgba(55,138,221,.05);
}
.faction-mil .ctxt {
  border-color: rgba(160,48,32,.18);
  background: rgba(160,48,32,.05);
}
.faction-wid .ctxt {
  border-color: rgba(61,110,16,.18);
  background: rgba(61,110,16,.05);
}
.faction-sch .ctxt {
  border-color: rgba(123,114,216,.18);
  background: rgba(123,114,216,.05);
}
.faction-neu .ctxt {
  border-color: rgba(196,154,31,.18);
  background: rgba(196,154,31,.05);
}

/* IR-Face Text-Box - RARITY-SPEZIFISCH! */
.rL .cf.ir-face .ctxt,
.rP .cf.ir-face .ctxt {
  background: rgba(4,11,22,.82);
  border-color: rgba(196,154,31,.18);
}
.rS .cf.ir-face .ctxt {
  background: rgba(4,11,22,.82);
  border-color: rgba(55,138,221,.18);
}

.ceff {
  font-size: 15px;
  line-height: 1.5;
  color: #eae8e0;
}

.ceff b {
  font-weight: 700;
}

.faction-ki .ceff b { color: #A8CFEF; }
.faction-mil .ceff b { color: #f08878; }
.faction-wid .ceff b { color: #88c850; }
.faction-sch .ceff b { color: #b0acf8; }
.faction-neu .ceff b { color: #F5D060; }

/* IR-Face Effect Text - RARITY-SPEZIFISCH! */
.rL .cf.ir-face .ceff b,
.rP .cf.ir-face .ceff b {
  color: #F5D060;
}
.rS .cf.ir-face .ceff b {
  color: #A8CFEF;
}

.cflavor {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,.25);
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: auto;
}

/* ── STATS ── */
.cstats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 0 8px;
}

.c-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* IR-Face Stats haben KEINE speziellen Boxen! */

.csv {
  font-family: 'Orbitron', sans-serif;
  font-size: 21px;
  font-weight: 900;
  color: #eae8e0;
  line-height: 1;
  text-align: center;
}

/* IR-Face Stats - RARITY-SPEZIFISCH! */
.rL .cf.ir-face .csv,
.rP .cf.ir-face .csv {
  color: #F5D060;
}
.rS .cf.ir-face .csv {
  color: #A8CFEF;
}

.csl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #888780;
  letter-spacing: .09em;
  text-align: center;
}

.csd {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.07);
}

/* ── META (Footer) - Logo + Set·Num only + CARD SIZE UPGRADE ── */
.cmeta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 5px 12px !important;
  border-top: .5px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.25);
  font-size: 7px;
}
/* Zone 1: Logo links */
.cmeta .cml       { grid-column: 1; justify-self: start; }
/* Zone 2: Mitte – Wrapper für Badge + Set-Code nebeneinander */
.cmeta .cmeta-mid { grid-column: 2; justify-self: center;
                    display: flex; align-items: center; gap: 4px; }
/* Zone 3: Kartennummer rechts */
.cmeta .cnum      { grid-column: 3; justify-self: end; }

.cml {
  display: inline-block;
  width: 56px !important;
  height: 10px !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTIwIDkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibHhhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNUJBOEU4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Imx4YiIgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsdHgiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiM1QkE4RTgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxsaW5lIHgxPSI2IiB5MT0iOCIgeDI9IjcyIiB5Mj0iODQiIHN0cm9rZT0idXJsKCNseGEpIiBzdHJva2Utd2lkdGg9IjEzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNzIiIHkxPSI4IiB4Mj0iNiIgeTI9Ijg0IiBzdHJva2U9InVybCgjbHhiKSIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjkwIiB5MT0iMTIiIHgyPSI5MCIgeTI9IjgwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMSIvPjx0ZXh0IHg9IjEwNCIgeT0iNzgiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjayxJbXBhY3QsQXJpYWwiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iNzIiIHRleHRMZW5ndGg9IjQwNiIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiBmaWxsPSJ1cmwoI2x0eCkiPk5FWFVTPC90ZXh0Pjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}

/* IR-Face Logo - RARITY-SPEZIFISCH! */
.rL .cf.ir-face .cml,
.rP .cf.ir-face .cml {
  color: rgba(196,154,31,.3);
}
.rS .cf.ir-face .cml {
  color: rgba(55,138,221,.3);
}

.mset {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px !important;
  padding: 2px 6px !important;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.05);
  border: .5px solid rgba(255,255,255,.12);
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}


.rL .mset,
.rIR .mset {
  color: rgba(196,154,31,.7);
  border-color: rgba(196,154,31,.25);
  background: rgba(196,154,31,.06);
}

.cnum {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px !important;
  color: rgba(255,255,255,.3);
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Removed: .rarity-meta and .cmr - Footer is now Logo + Set·Num only */

/* ══════════════════════════════════════════════
   FACTION CARDS (overview grid)
══════════════════════════════════════════════ */
.faction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.faction-card {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: 28px 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
}
.faction-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .2s;
}
.faction-card:hover { transform: translateY(-4px); }
.faction-card:hover::before { opacity: 1; }
.faction-card:hover { border-color: var(--fc, var(--border-2)); }

.fc-ki  { --fc: rgba(29,92,158,.5); }  .fc-ki::before  { background: radial-gradient(ellipse at top, rgba(29,92,158,.1), transparent 70%); }
.fc-mil { --fc: rgba(160,48,32,.5); }  .fc-mil::before { background: radial-gradient(ellipse at top, rgba(160,48,32,.1), transparent 70%); }
.fc-wid { --fc: rgba(61,110,16,.5); }  .fc-wid::before { background: radial-gradient(ellipse at top, rgba(61,110,16,.1), transparent 70%); }
.fc-sch { --fc: rgba(123,114,216,.5); } .fc-sch::before { background: radial-gradient(ellipse at top, rgba(123,114,216,.1), transparent 70%); }

.faction-card-icon {
  font-size: 36px; margin-bottom: 16px;
  display: block; filter: drop-shadow(0 0 10px currentColor);
}
.faction-card-name {
  font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 900;
  letter-spacing: .1em; margin-bottom: 8px;
}
.faction-card-tag {
  font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: .14em;
  color: var(--t2); margin-bottom: 14px;
}
.faction-card-desc { font-size: 15px; color: rgba(245,242,232,.84); line-height: 1.75; }
.faction-card-count {
  font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--t2);
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  letter-spacing: .1em;
}

/* ══════════════════════════════════════════════
   STATS BOXES
══════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
}
.stat-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px; font-weight: 900; line-height: 1;
}
.stat-lbl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: var(--t2); letter-spacing: .1em; margin-top: 6px;
}

/* ══════════════════════════════════════════════
   FILTERS
══════════════════════════════════════════════ */
.filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; margin-bottom: 28px;
}
.filter-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.fbtn {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; padding: 5px 14px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--t2);
  cursor: pointer; transition: all .15s;
}
.fbtn:hover { border-color: var(--border-2); color: var(--t1); }
.fbtn.active { background: var(--bg-3); border-color: var(--border-2); color: var(--t1); }
.fbtn.active-ki  { color: var(--ki-l);  border-color: rgba(55,138,221,.5);   background: rgba(55,138,221,.08); }
.fbtn.active-mil { color: var(--mil-l); border-color: rgba(160,48,32,.5);    background: rgba(160,48,32,.08); }
.fbtn.active-wid { color: var(--wid-l); border-color: rgba(61,110,16,.5);    background: rgba(61,110,16,.08); }
.fbtn.active-sch { color: var(--sch-l); border-color: rgba(123,114,216,.5);  background: rgba(123,114,216,.08); }

/* Card grid */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  max-width: 1360px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════
   WEEKLY PLAY SECTION
══════════════════════════════════════════════ */
.wp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(196,154,31,.4); border-radius: 3px;
  padding: 5px 16px; background: rgba(196,154,31,.06);
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: var(--gold); letter-spacing: .14em;
}

.wp-week-row {
  display: flex; gap: 32px; align-items: flex-start;
  padding: 24px 0; border-bottom: 1px solid var(--border);
}
.wp-week-num {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--gold);
  background: rgba(196,154,31,.1); border: 1px solid rgba(196,154,31,.3);
  border-radius: 3px; padding: 4px 12px; flex-shrink: 0; align-self: flex-start;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════
   RULES PAGE
══════════════════════════════════════════════ */
.rules-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

.rules-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

.rules-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 5px;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--t2);
  transition: all .15s; cursor: pointer;
}
.rules-nav-link:hover,
.rules-nav-link.active { background: var(--bg-3); color: var(--t1); }

.rules-section {
  margin-bottom: 64px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.rules-section-title {
  font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900;
  letter-spacing: .08em; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}

.rules-box {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 24px; margin-bottom: 16px;
}
.rules-box h4 {
  font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: .1em;
  color: var(--gold); margin-bottom: 8px;
}
.rules-box p { font-size: 15px; line-height: 1.8; color: rgba(240,237,228,.85); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
  margin-top: 80px;
}

.footer-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 48px;
}

.footer-brand-logo {
  font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900;
  letter-spacing: .14em;
  background: linear-gradient(120deg, var(--sch), var(--gold), var(--mil));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 10px;
}
.footer-brand-sub {
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: var(--t2); letter-spacing: .14em; line-height: 1.6;
}

.footer-col-title {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; color: var(--t2); margin-bottom: 12px;
}
.footer-link {
  display: block; font-size: 13px; font-weight: 600; color: rgba(234,232,224,.55);
  padding: 4px 0; transition: color .15s;
}
.footer-link:hover { color: var(--t1); }

.footer-bottom {
  max-width: 1360px; margin: 32px auto 0; padding: 16px 24px 0;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--t2);
  letter-spacing: .1em;
}

/* ══════════════════════════════════════════════
   SECTION PADDINGS
══════════════════════════════════════════════ */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ══════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════ */
.text-gold   { color: var(--gold); }
.text-gold-l { color: var(--gold-l); }
.text-ki     { color: var(--ki-l); }
.text-mil    { color: var(--mil-l); }
.text-wid    { color: var(--wid-l); }
.text-sch    { color: var(--sch-l); }
.text-muted  { color: var(--t2); }
.text-mono   { font-family: 'Share Tech Mono', monospace; }
.text-center { text-align: center; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .faction-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-cards   { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .rules-layout { grid-template-columns: 1fr; }
  .rules-nav    { position: static; }
}

@media (max-width: 640px) {
  .faction-grid { grid-template-columns: 1fr; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .nav-links    { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   IR FULL ART STRUKTUR (380×532px)
   ══════════════════════════════════════════════════════════════ */

/* Full Art Background */
.af {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.af svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Gradient Mask */
.mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    transparent 36%,
    rgba(3,7,18,.42) 50%, 
    rgba(3,7,18,.82) 63%, 
    rgba(3,7,18,.96) 75%, 
    rgba(3,7,18,1) 100%);
}

/* Noise Texture */
.noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .028;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Top Header (absolute) */
.ir-ctop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 13px 16px 10px;
  gap: 9px;
}

/* IR Cost Bubble */
.ir-ccost {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 19px;
  font-weight: 700;
  flex-shrink: 0;
}
.rL .ir-ccost, .rP .ir-ccost {
  border: 2px solid rgba(196,154,31,.9);
  color: #F5D060;
  background: rgba(8,4,0,.75);
}
.rS .ir-ccost {
  border: 2px solid rgba(55,138,221,.85);
  color: #A8CFEF;
  background: rgba(0,4,18,.75);
}

/* IR Card Name */
.ir-cname {
  flex: 1;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  padding: 0 6px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,.9);
}

/* Bottom Container */
.btm {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Type Bar */
.typebar {
  display: flex;
  justify-content: space-between;
  padding: 3px 16px;
}
.ttype {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
}
.tid {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
}
.rL .tid, .rP .tid {
  color: rgba(196,154,31,.65);
}
.rS .tid {
  color: rgba(55,138,221,.65);
}

/* Text Box */
.tbox {
  margin: 3px 13px;
  padding: 9px 13px 7px;
  border-radius: 6px;
  background: rgba(3,7,18,.84);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rL .tbox, .rP .tbox {
  border: .5px solid rgba(196,154,31,.18);
}
.rS .tbox {
  border: .5px solid rgba(55,138,221,.18);
}

/* IR Stamp Badge */
.stamp {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1px 12px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 3px;
}
.rL .stamp, .rP .stamp {
  background: rgba(196,154,31,.18);
  border: .5px solid rgba(196,154,31,.5);
  color: #EF9F27;
}
.rS .stamp {
  background: rgba(55,138,221,.18);
  border: .5px solid rgba(55,138,221,.5);
  color: #A8CFEF;
}

/* Effect Text */
.eff {
  font-size: 15px;
  line-height: 1.47;
  color: #eae8e0;
}
.rL .eff b, .rP .eff b {
  font-weight: 700;
  color: #F5D060;
}
.rS .eff b {
  font-weight: 700;
  color: #A8CFEF;
}

/* Flavor Text */
.flv {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,.24);
  line-height: 1.3;
  margin-top: 3px;
}

/* Stats Bar */
.sbar {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 7px 13px 7px;
  background: rgba(0,0,0,.35);
  border-top: .5px solid rgba(255,255,255,.06);
  margin: 4px 13px 0;
}

/* Stats Boxen - WICHTIG! */
.sbar > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: .5px solid rgba(255,255,255,.07);
  position: relative;
}

/* Erste Box (KOSTEN) - Rarity-spezifisch! */
.rL .sbar > div:first-child,
.rIR .sbar > div:first-child {
  border-color: rgba(196,154,31,.3);
  background: rgba(196,154,31,.07);
}
.rP .sbar > div:first-child {
  border-color: rgba(127,119,221,.25);
  background: rgba(127,119,221,.06);
}
.rS .sbar > div:first-child {
  border-color: rgba(55,138,221,.25);
  background: rgba(55,138,221,.06);
}
.rE .sbar > div:first-child {
  border-color: rgba(29,158,117,.2);
  background: rgba(29,158,117,.05);
}

/* Letzte Box (OPFER) - IMMER Lila! */
.sbar > div:last-child {
  border-color: rgba(123,114,216,.2);
  background: rgba(123,114,216,.05);
}

/* Divider verstecken */
.sdiv {
  display: none;
}

.sv {
  font-family: 'Orbitron', sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
}

/* Kosten - Rarity-spezifisch! */
.sbar > div:first-child .sv {
  color: #8ec8ff;
}
.rL .sbar > div:first-child .sv,
.rIR .sbar > div:first-child .sv {
  color: #F5D060;
}
.rP .sbar > div:first-child .sv {
  color: #c0b8ff;
}

/* Opfer - IMMER Lila! */
.sbar > div:last-child .sv {
  color: #b0a8e8;
}

.sl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  text-align: center;
}

/* Icons via CSS */
.sbar > div:first-child .sl::before {
  content: '₵ ';
  color: rgba(140,200,255,.45);
}
.sbar > div:last-child .sl::before {
  content: '◈ ';
  color: rgba(160,152,232,.45);
}

/* Meta Footer - EXAKT wie normale Karten! */
.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px !important;
  border-top: .5px solid rgba(255,255,255,.06);
}

/* Logo wie normale Karten */
.ml {
  display: inline-block;
  width: 56px !important;
  height: 10px !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTIwIDkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibHhhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNUJBOEU4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Imx4YiIgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsdHgiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiM1QkE4RTgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxsaW5lIHgxPSI2IiB5MT0iOCIgeDI9IjcyIiB5Mj0iODQiIHN0cm9rZT0idXJsKCNseGEpIiBzdHJva2Utd2lkdGg9IjEzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNzIiIHkxPSI4IiB4Mj0iNiIgeTI9Ijg0IiBzdHJva2U9InVybCgjbHhiKSIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjkwIiB5MT0iMTIiIHgyPSI5MCIgeTI9IjgwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMSIvPjx0ZXh0IHg9IjEwNCIgeT0iNzgiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjayxJbXBhY3QsQXJpYWwiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iNzIiIHRleHRMZW5ndGg9IjQwNiIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiBmaWxsPSJ1cmwoI2x0eCkiPk5FWFVTPC90ZXh0Pjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}

/* Set-Code und Card Number */
.meta .mset {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px !important;
  padding: 2px 6px !important;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.05);
  border: .5px solid rgba(255,255,255,.12);
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Set-Code GOLD für Legendary/Episch IR! */
.rL .meta .mset,
.rP .meta .mset {
  color: rgba(196,154,31,.7);
  border-color: rgba(196,154,31,.25);
  background: rgba(196,154,31,.06);
}

.meta .cnum {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px !important;
  color: rgba(255,255,255,.3);
  letter-spacing: .08em;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   IR FACTION OVERRIDES
   Faction-spezifische Farben für IR Full-Art Karten.
   Überschreiben die KI-Defaults (rgba(3,7,18,...) / rgba(55,138,221,...))
   ══════════════════════════════════════════════════════════════ */

/* ── MILITÄR ─────────────────────────────────────────────────── */

/* Hintergrund-Gradient (statt KI-Dunkelblau: Dunkelrot-Braun) */
.faction-mil .mask {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 36%,
    rgba(5,2,1,.44) 50%,
    rgba(5,2,1,.84) 63%,
    rgba(5,2,1,.96) 75%,
    rgba(5,2,1,1) 100%);
}

/* Textbox-Hintergrund */
.faction-mil .tbox {
  background: rgba(5,2,1,.85);
}

/* rS (SELTEN) Akzente: MIL Orange */
.faction-mil .rS .tbox {
  border: .5px solid rgba(216,90,48,.18);
}
.faction-mil .rS .ir-ccost {
  border: 1.5px solid rgba(216,90,48,.85);
  color: #F5C4B3;
  background: rgba(20,4,0,.75);
}
.faction-mil .rS .tid {
  color: rgba(216,90,48,.65);
}
.faction-mil .rS .eff b {
  color: #F5C4B3;
}
.faction-mil .rS .stamp {
  background: rgba(216,90,48,.18);
  border: .5px solid rgba(216,90,48,.5);
  color: #F5C4B3;
}
.faction-mil .rS .sbar > div:first-child {
  border-color: rgba(216,90,48,.25);
  background: rgba(216,90,48,.06);
}
.faction-mil .rS .sbar > div:first-child .sv {
  color: #F5C4B3;
}

/* rS Card Box-Shadow */
.cw .faction-mil.rS {
  box-shadow: 0 0 0 1.5px rgba(216,90,48,.6),
              0 12px 32px rgba(0,0,0,.85),
              0 0 22px rgba(216,90,48,.2);
}


/* ── WIDERSTAND ──────────────────────────────────────────────── */

/* Hintergrund-Gradient (Dunkelgrün) */
.faction-wid .mask {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 36%,
    rgba(2,6,2,.44) 50%,
    rgba(2,6,2,.84) 63%,
    rgba(2,6,2,.96) 75%,
    rgba(2,6,2,1) 100%);
}

.faction-wid .tbox {
  background: rgba(2,6,2,.85);
}

/* rS (SELTEN) Akzente: WID Grün */
.faction-wid .rS .tbox {
  border: .5px solid rgba(94,152,32,.18);
}
.faction-wid .rS .ir-ccost {
  border: 1.5px solid rgba(94,152,32,.85);
  color: #B8D98E;
  background: rgba(2,6,1,.75);
}
.faction-wid .rS .tid {
  color: rgba(94,152,32,.65);
}
.faction-wid .rS .eff b {
  color: #B8D98E;
}
.faction-wid .rS .stamp {
  background: rgba(94,152,32,.18);
  border: .5px solid rgba(94,152,32,.5);
  color: #B8D98E;
}
.faction-wid .rS .sbar > div:first-child {
  border-color: rgba(94,152,32,.25);
  background: rgba(94,152,32,.06);
}
.faction-wid .rS .sbar > div:first-child .sv {
  color: #B8D98E;
}

/* rS Card Box-Shadow */
.cw .faction-wid.rS {
  box-shadow: 0 0 0 1.5px rgba(94,152,32,.6),
              0 12px 32px rgba(0,0,0,.85),
              0 0 22px rgba(94,152,32,.2);
}


/* ── SCHATTEN ────────────────────────────────────────────────── */

/* Hintergrund-Gradient (Dunkel-Lila) */
.faction-sch .mask {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 36%,
    rgba(3,2,10,.44) 50%,
    rgba(3,2,10,.84) 63%,
    rgba(3,2,10,.96) 75%,
    rgba(3,2,10,1) 100%);
}

.faction-sch .tbox {
  background: rgba(3,2,10,.85);
}

/* rS (SELTEN) Akzente: SCH Lila */
.faction-sch .rS .tbox {
  border: .5px solid rgba(123,114,216,.18);
}
.faction-sch .rS .ir-ccost {
  border: 1.5px solid rgba(123,114,216,.85);
  color: #C7C2F5;
  background: rgba(3,2,10,.75);
}
.faction-sch .rS .tid {
  color: rgba(123,114,216,.65);
}
.faction-sch .rS .eff b {
  color: #C7C2F5;
}
.faction-sch .rS .stamp {
  background: rgba(123,114,216,.18);
  border: .5px solid rgba(123,114,216,.5);
  color: #C7C2F5;
}
.faction-sch .rS .sbar > div:first-child {
  border-color: rgba(123,114,216,.25);
  background: rgba(123,114,216,.06);
}
.faction-sch .rS .sbar > div:first-child .sv {
  color: #C7C2F5;
}

/* rS Card Box-Shadow */
.cw .faction-sch.rS {
  box-shadow: 0 0 0 1.5px rgba(123,114,216,.6),
              0 12px 32px rgba(0,0,0,.85),
              0 0 22px rgba(123,114,216,.2);
}


/* ══════════════════════════════════════════════════════════════
   RARITY FRAME FACTION OVERRIDES
   rB  (Basis)   → immer grau     (universal)
   rL  (Legendär)→ immer gold     (universal)
   rE/rS/rP      → Fraktionsfarbe (Overrides unten)
   ══════════════════════════════════════════════════════════════ */

/* ── MILITÄR  (Rot/Orange #D85A30) ───────────────────────────── */
.faction-mil.rE {
  box-shadow: 0 0 0 1px   rgba(216,90,48,.35),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 14px    rgba(216,90,48,.1);
}
.faction-mil.rS {
  box-shadow: 0 0 0 1.5px rgba(216,90,48,.55),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 20px    rgba(216,90,48,.15);
}
.faction-mil.rP {
  box-shadow: 0 0 0 1.5px rgba(216,90,48,.65),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 28px    rgba(216,90,48,.22);
}
.cw:hover .faction-mil.rS {
  box-shadow: 0 0 0 2px   rgba(216,90,48,.8),
              0 12px 32px rgba(0,0,0,.8),
              0 0 32px    rgba(216,90,48,.25);
}
.cw:hover .faction-mil.rP {
  box-shadow: 0 0 0 2px   rgba(216,90,48,.9),
              0 12px 36px rgba(0,0,0,.85),
              0 0 44px    rgba(216,90,48,.35);
}
/* Rarity Gem */
.faction-mil .rE .cgem {
  background: rgba(216,90,48,.8);
  box-shadow: 0 0 4px rgba(216,90,48,.6);
}
.faction-mil .rS .cgem {
  background: #D85A30;
  box-shadow: 0 0 7px rgba(216,90,48,.8);
}
.faction-mil .rP .cgem {
  background: #D85A30;
  box-shadow: 0 0 9px rgba(216,90,48,.9);
}


/* ── WIDERSTAND  (Grün #5E9820) ──────────────────────────────── */
.faction-wid.rE {
  box-shadow: 0 0 0 1px   rgba(94,152,32,.35),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 14px    rgba(94,152,32,.1);
}
.faction-wid.rS {
  box-shadow: 0 0 0 1.5px rgba(94,152,32,.55),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 20px    rgba(94,152,32,.15);
}
.faction-wid.rP {
  box-shadow: 0 0 0 1.5px rgba(94,152,32,.65),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 28px    rgba(94,152,32,.22);
}
.cw:hover .faction-wid.rS {
  box-shadow: 0 0 0 2px   rgba(94,152,32,.8),
              0 12px 32px rgba(0,0,0,.8),
              0 0 32px    rgba(94,152,32,.25);
}
.cw:hover .faction-wid.rP {
  box-shadow: 0 0 0 2px   rgba(94,152,32,.9),
              0 12px 36px rgba(0,0,0,.85),
              0 0 44px    rgba(94,152,32,.35);
}
/* Rarity Gem */
.faction-wid .rE .cgem {
  background: rgba(94,152,32,.8);
  box-shadow: 0 0 4px rgba(94,152,32,.6);
}
.faction-wid .rS .cgem {
  background: #5E9820;
  box-shadow: 0 0 7px rgba(94,152,32,.8);
}
.faction-wid .rP .cgem {
  background: #5E9820;
  box-shadow: 0 0 9px rgba(94,152,32,.9);
}


/* ── SCHATTEN  (Lila #7B72D8) ────────────────────────────────── */
.faction-sch.rE {
  box-shadow: 0 0 0 1px   rgba(123,114,216,.35),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 14px    rgba(123,114,216,.1);
}
.faction-sch.rS {
  box-shadow: 0 0 0 1.5px rgba(123,114,216,.55),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 20px    rgba(123,114,216,.15);
}
.faction-sch.rP {
  box-shadow: 0 0 0 1.5px rgba(123,114,216,.65),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 28px    rgba(123,114,216,.22);
}
.cw:hover .faction-sch.rS {
  box-shadow: 0 0 0 2px   rgba(123,114,216,.8),
              0 12px 32px rgba(0,0,0,.8),
              0 0 32px    rgba(123,114,216,.25);
}
.cw:hover .faction-sch.rP {
  box-shadow: 0 0 0 2px   rgba(123,114,216,.9),
              0 12px 36px rgba(0,0,0,.85),
              0 0 44px    rgba(123,114,216,.35);
}
/* Rarity Gem */
.faction-sch .rE .cgem {
  background: rgba(123,114,216,.8);
  box-shadow: 0 0 5px rgba(123,114,216,.6);
}
.faction-sch .rS .cgem {
  background: #7B72D8;
  box-shadow: 0 0 7px rgba(123,114,216,.8);
}
.faction-sch .rP .cgem {
  background: #7B72D8;
  box-shadow: 0 0 9px rgba(123,114,216,.9);
}


/* ══════════════════════════════════════════════════════════════
   NEUTRAL / SEKTOR KARTEN
   Eigene CSS-Variablen, Subklassen und Rarity-Overrides
   ══════════════════════════════════════════════════════════════ */

:root {
  --neu:      #9aa8b8;
  --neu-d:    #3a4455;
  --neu-l:    #dce4ed;
  --sektor:   #8fa8c8;
  --sektor-g: #c4a030;
}

/* ── Rarity-Rahmen: Neutral (silber-grau) ────────────────────── */
.faction-neu.rE {
  box-shadow: 0 0 0 1px   rgba(154,168,184,.42),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 14px    rgba(154,168,184,.08);
}
.faction-neu.rS {
  box-shadow: 0 0 0 1.5px rgba(154,168,184,.55),
              0 8px 24px  rgba(0,0,0,.7),
              0 0 20px    rgba(154,168,184,.12);
}
/* Sektor Gamma – gold wie Legendär */
.rS-gold {
  box-shadow: 0 0 0 1.5px rgba(196,154,31,.65),
              0 8px 28px  rgba(0,0,0,.8),
              0 0 26px    rgba(196,154,31,.2);
  animation: sgold 3s ease-in-out infinite;
}
.rS-gold .cgem {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIxMiwwIDEzLjUsNSAyMiwxMiAxMy41LDE5IDEyLDI0IDEwLjUsMTkgMiwxMiAxMC41LDUiIGZpbGw9InJnYmEoMTk2LDE1NCwzMSwwLjE4KSIgc3Ryb2tlPSIjQzQ5QTFGIiBzdHJva2Utd2lkdGg9IjEuOCIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSIyMiIgeTI9IjEyIiBzdHJva2U9IiNDNDlBMUYiIHN0cm9rZS13aWR0aD0iMC45IiBvcGFjaXR5PSIwLjUiLz48bGluZSB4MT0iMTIiIHkxPSIwIiB4Mj0iMTIiIHkyPSIyNCIgc3Ryb2tlPSIjQzQ5QTFGIiBzdHJva2Utd2lkdGg9IjAuOSIgb3BhY2l0eT0iMC41Ii8+PHBvbHlnb24gcG9pbnRzPSIxMiw1IDE3LDEyIDEyLDE5IDcsMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M0OUExRiIgc3Ryb2tlLXdpZHRoPSIwLjkiIG9wYWNpdHk9IjAuNiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiIGZpbGw9IiNDNDlBMUYiLz48L3N2Zz4=");
  animation: none !important;
}
@keyframes sgold {
  0%,100% { box-shadow: 0 0 0 1.5px rgba(196,154,31,.65), 0 8px 28px rgba(0,0,0,.8), 0 0 26px rgba(196,154,31,.2); }
  50%      { box-shadow: 0 0 0 2px   rgba(196,154,31,.9),  0 8px 32px rgba(0,0,0,.85),0 0 40px rgba(196,154,31,.35); }
}

/* ── Hintergründe ────────────────────────────────────────────── */
.cbg-sektor   { background: radial-gradient(ellipse at 50% 30%, #10182a 0%, #080d18 100%); }
.cbg-sektor-g { background: radial-gradient(ellipse at 50% 30%, #181408 0%, #0a0905 100%); }
.cbg-std      { background: radial-gradient(ellipse at 50% 30%, #151c25 0%, #0a0e15 100%); }

/* ── Eck-Rahmen ──────────────────────────────────────────────── */
.cor-sektor   { border-color: rgba(143,168,200,.35); }
.cor-sektor-g { border-color: rgba(196,154,31,.45); }
.cor-std      { border-color: rgba(154,168,184,.25); }

/* ── Cost-Bubble ─────────────────────────────────────────────── */
.cost-sektor {
  border: 1.5px solid rgba(143,168,200,.6);
  color: #a8c8e8;
  background: rgba(143,168,200,.12);
}
.cost-gold {
  border: 1.5px solid rgba(196,154,31,.7);
  color: var(--gold-l);
  background: rgba(196,154,31,.1);
}
.cost-std {
  border: 1.5px solid rgba(154,168,184,.5);
  color: var(--neu);
  background: rgba(154,168,184,.1);
}

/* ── Trennlinie ──────────────────────────────────────────────── */
.cline-sektor { height:2px; margin:0 8px; flex-shrink:0; background: linear-gradient(90deg, transparent, rgba(143,168,200,.6), transparent); }
.cline-gold   { height:2px; margin:0 8px; flex-shrink:0; background: linear-gradient(90deg, transparent, rgba(196,154,31,.65), transparent); }
.cline-std    { height:2px; margin:0 8px; flex-shrink:0; background: linear-gradient(90deg, transparent, rgba(154,168,184,.5),  transparent); }

/* ── Karten-ID ───────────────────────────────────────────────── */
.ctid-sektor { font-family:'Share Tech Mono',monospace; font-size:8px; color: rgba(143,168,200,.75); }
.ctid-gold   { font-family:'Share Tech Mono',monospace; font-size:8px; color: rgba(196,154,31,.8); }
.ctid-std    { font-family:'Share Tech Mono',monospace; font-size:8px; color: rgba(154,168,184,.7); }

/* ── Textbox ─────────────────────────────────────────────────── */
.ctxt-sektor { border: 1px solid rgba(143,168,200,.2);  background: rgba(143,168,200,.05); }
.ctxt-gold   { border: 1px solid rgba(196,154,31,.2);   background: rgba(196,154,31,.04); }
.ctxt-std    { border: 1px solid rgba(154,168,184,.16); background: rgba(154,168,184,.04); }

/* ── Effect-Bold-Farbe ───────────────────────────────────────── */
.ceff-sektor b { color: #b8d0e8; }
.ceff-gold   b { color: var(--gold-l); }
.ceff-std    b { color: var(--neu-l); }

/* ── Sektor-Badge ────────────────────────────────────────────── */
.sektor-badge {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px; font-weight: 700;
  letter-spacing: .12em;
  padding: 1px 7px; border-radius: 2px;
  margin-bottom: 3px;
}
.badge-ab {
  background: rgba(143,168,200,.15);
  border: .5px solid rgba(143,168,200,.4);
  color: #a8c8e8;
}
.badge-g {
  background: rgba(196,154,31,.18);
  border: .5px solid rgba(196,154,31,.5);
  color: #EF9F27;
}

/* ── Sektor-Fraktions-Icons ──────────────────────────────────── */
.sektor-icons {
  display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.sikon {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
.sikon-ki  { background: rgba(55,138,221,.55); }
.sikon-mil { background: rgba(216,90,48,.55); }
.sikon-wid { background: rgba(94,152,32,.55); }
.sikon-sch { background: rgba(123,114,216,.55); }

/* ── Rarity Gem für neutral ──────────────────────────────────── */
.gem-B  { background: rgba(154,168,184,.6); }
.gem-E  { background: rgba(154,168,184,.8);  box-shadow: 0 0 5px rgba(154,168,184,.5); }
.gem-S  { background: var(--neu);            box-shadow: 0 0 7px rgba(154,168,184,.8); }
.gem-Sg { background: linear-gradient(135deg,#C49A1F,#F5D060); box-shadow: 0 0 9px rgba(196,154,31,.9); animation: sg 3s ease-in-out infinite; }
@keyframes sg {
  0%,100% { box-shadow: 0 0 9px rgba(196,154,31,.9); }
  50%     { box-shadow: 0 0 14px rgba(196,154,31,1); }
}


/* ══════════════════════════════════════════════════════════════
   HQ HAUPTQUARTIER KARTEN
   Full-Art Karten, 380×532px, keine Spielwerte – nur Lore
   ══════════════════════════════════════════════════════════════ */

.hq-card-wrapper {
  width: 380px;
  height: 532px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .08s ease, box-shadow .3s;
}
.hq-card-wrapper:hover {
  transform: perspective(800px) translateY(-6px) scale(1.03);
}

/* Faction backgrounds */
.hq-ki  { background: #0a1520; }
.hq-mil { background: #1a0a08; }
.hq-wid { background: #0a1508; }
.hq-sch { background: #0f0e1a; }
.hq-neu { background: #12100a; }

/* Rarity box-shadows */
.hq-std   { box-shadow: 0 0 0 1px rgba(180,180,180,.3), 0 8px 24px rgba(0,0,0,.7); }
.hq-elite { box-shadow: 0 0 0 1.5px rgba(196,154,31,.6), 0 8px 28px rgba(0,0,0,.8), 0 0 24px rgba(196,154,31,.15); }
.hq-nexus { box-shadow: 0 0 0 2px rgba(150,100,255,.7), 0 8px 32px rgba(0,0,0,.85), 0 0 36px rgba(150,100,255,.2);
            animation: hq-nexus-pulse 3s ease-in-out infinite; }
@keyframes hq-nexus-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(150,100,255,.7), 0 8px 32px rgba(0,0,0,.85), 0 0 36px rgba(150,100,255,.2); }
  50%     { box-shadow: 0 0 0 2px rgba(180,140,255,.9), 0 8px 40px rgba(0,0,0,.9),  0 0 54px rgba(150,100,255,.38); }
}

/* Artwork (full-bleed background image) */
.hq-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hq-artwork img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient Overlay */
.hq-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.1)  30%,
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,.75) 75%,
    rgba(0,0,0,.95) 100%
  );
}

/* Top Bar */
.hq-top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
}

/* HQ Badge (oben links) */
.hq-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: .25em;
  padding: 4px 10px; border-radius: 3px;
  border: 1.5px solid;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,.5);
}
.hq-badge-std   { border-color: rgba(180,180,180,.5); color: rgba(220,220,220,.8); }
.hq-badge-elite { border-color: rgba(196,154,31,.7);  color: #C49A1F; }
.hq-badge-nexus { border-color: rgba(150,100,255,.8); color: #c0a0ff; }

/* HP Badge (oben rechts) */
.hq-hp-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px; font-weight: 900;
  display: flex; flex-direction: column;
  align-items: center; line-height: 1;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,.5);
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid;
}
.hq-hp-label {
  font-size: 8px; font-weight: 400;
  letter-spacing: .12em;
  opacity: .7; margin-top: 2px;
}

/* Bottom Section */
.hq-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 0 20px 18px;
}
.hq-card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 900;
  letter-spacing: .1em; line-height: 1.15;
  margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,1);
  color: #fff;
}
.hq-faction-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; letter-spacing: .2em;
  opacity: .65; margin-bottom: 10px;
  color: #fff;
}
.hq-lore {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11.5px; font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 10px; margin-bottom: 12px;
}
.hq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

/* Nexus-Logo – identisch mit .cml der Standardkarten */
.hq-card-logo {
  display: inline-block;
  width: 56px;
  height: 10px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTIwIDkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibHhhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNUJBOEU4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Imx4YiIgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJsdHgiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOEI3RkYwIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiM1QkE4RTgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzZEQjgyQSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0UwNUMyOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxsaW5lIHgxPSI2IiB5MT0iOCIgeDI9IjcyIiB5Mj0iODQiIHN0cm9rZT0idXJsKCNseGEpIiBzdHJva2Utd2lkdGg9IjEzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNzIiIHkxPSI4IiB4Mj0iNiIgeTI9Ijg0IiBzdHJva2U9InVybCgjbHhiKSIgc3Ryb2tlLXdpZHRoPSIxMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjkwIiB5MT0iMTIiIHgyPSI5MCIgeTI9IjgwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMSIvPjx0ZXh0IHg9IjEwNCIgeT0iNzgiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjayxJbXBhY3QsQXJpYWwiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iNzIiIHRleHRMZW5ndGg9IjQwNiIgbGVuZ3RoQWRqdXN0PSJzcGFjaW5nQW5kR2x5cGhzIiBmaWxsPSJ1cmwoI2x0eCkiPk5FWFVTPC90ZXh0Pjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}

.hq-card-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,.3);
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hq-rarity-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px; letter-spacing: .15em;
  padding: 3px 8px; border-radius: 2px; border: 1px solid;
  white-space: nowrap; flex-shrink: 0;
}
.hq-rarity-std   { color: rgba(200,200,200,.7); border-color: rgba(180,180,180,.4); }
.hq-rarity-elite { color: #C49A1F;              border-color: rgba(196,154,31,.5); }
.hq-rarity-nexus { color: #c0a0ff;              border-color: rgba(150,100,255,.5); }


/* ══════════════════════════════════════════════════════════════
   WEEKLY PLAY KARTEN
   Gold-themed, Set NXS-WP-S1, eigene Nummerierung
   ══════════════════════════════════════════════════════════════ */

/* WP-Karten: immer Gold-Hintergrund wie normale Legendär */
.cw-wp .cbg {
  background: radial-gradient(ellipse at 50% 30%, #13100a 0%, #07060a 100%);
}

/* WP-Stamp im Typebar */
.wp-stamp {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 900;
  letter-spacing: .12em;
  background: linear-gradient(135deg, #C49A1F, #F5D060);
  color: #000;
  padding: 2px 6px; border-radius: 2px;
  flex-shrink: 0;
}

/* Gold-Gem für WP */
.cw-wp .cgem {
  background: linear-gradient(135deg, #C49A1F, #F5D060);
  box-shadow: 0 0 9px rgba(196,154,31,.9);
  animation: lg-gem 2.5s ease-in-out infinite;
}

/* Cost-Bubble gold */
.cw-wp .ccost {
  border-color: rgba(196,154,31,.85);
  color: var(--gold-l);
  background: rgba(196,154,31,.12);
}

/* Faction line gold */
.cw-wp .cline {
  background: linear-gradient(90deg, transparent, rgba(196,154,31,.65), transparent);
}

/* Effect bold gold */
.cw-wp .ceff b {
  color: var(--gold-l);
}

/* Card ID gold */
.cw-wp .ctid {
  color: rgba(196,154,31,.75);
}

/* Textbox border gold */
.cw-wp .ctxt {
  border-color: rgba(196,154,31,.2);
  background: rgba(196,154,31,.04);
}

/* Stats gold accent on first box */
.cw-wp .cstats > div:first-child {
  border-color: rgba(196,154,31,.3);
  background: rgba(196,154,31,.07);
}
.cw-wp .cstats > div:first-child .csv {
  color: #F5D060;
}


/* ══════════════════════════════════════════════════════════════
   NAV DROPDOWNS
   ══════════════════════════════════════════════════════════════ */

/* Dropdown-Wrapper – relativ positioniert für das Menu */
.nav-dropdown {
  position: relative;
}

/* Trigger-Button: gleiche Optik wie .nav-link */
.nav-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-family: inherit;
}

.nav-chevron {
  font-size: 9px;
  opacity: .5;
  transition: transform .2s, opacity .2s;
  display: inline-block;
}
.nav-dropdown--open .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Aktiver Zustand des Triggers wenn Route aktiv */
.nav-dropdown--active .nav-dropdown-trigger {
  color: var(--t1);
}
.nav-dropdown--active .nav-link-dot {
  background: var(--t1);
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}

/* Das Dropdown-Menu selbst */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--bg-2, #0e1118);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.05);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
  /* Unsichtbares Padding oben überbrückt den Spalt zwischen Trigger und Menü */
  padding-top: 22px;
  margin-top: -8px;
}

/* Rechtsbündiges Menu (für WP) */
.nav-dropdown-menu--right {
  left: auto;
  right: 0;
}

/* Geöffnet */
.nav-dropdown--open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Abschnitt-Label */
.nav-dropdown-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
  padding: 6px 16px 8px;
}

/* Trennlinie */
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 6px 0;
}

/* Dropdown-Item */
.nav-dropdown-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  text-decoration: none;
  color: rgba(255,255,255,.75);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color .15s, background .15s;
  --item-accent: rgba(255,255,255,1);
}
.nav-dropdown-item:hover {
  background: rgba(255,255,255,.06);
  color: var(--item-accent, #fff);
}
.nav-dropdown-item--active {
  color: var(--item-accent, #fff);
}
.nav-dropdown-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--item-accent, #fff);
  border-radius: 1px;
}

/* Sub-Text unter dem Item-Label */
.nav-dropdown-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
  font-weight: 400;
}

/* WP-Dropdown: kompakter */
.nav-dropdown--wp .nav-dropdown-menu {
  min-width: 180px;
}


/* ── Nav Dropdown Alignment Fix ─────────────────────────────── */
/* .nav-dropdown muss sich wie .nav-link verhalten:
   volle Stretch-Höhe, kein eigenes Padding, kein Block-Verhalten */
.nav-dropdown {
  display: flex;
  align-items: stretch;
}

.nav-dropdown-trigger {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 24px;
  color: rgba(245,242,232,.42);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .18s;
  white-space: nowrap;
}

.nav-dropdown-trigger:hover,
.nav-dropdown--open .nav-dropdown-trigger {
  color: rgba(245,242,232,.85);
}

.nav-dropdown--active .nav-dropdown-trigger {
  color: rgba(245,242,232,1);
  border-bottom-color: rgba(245,242,232,.35);
}


/* ── WP Badge-Stil (überschreibt den generischen Trigger-Stil) ── */
.nav-dropdown--wp {
  align-items: center;   /* vertikal zentriert, nicht stretch */
}

.nav-dropdown--wp .nav-dropdown-trigger {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  background: linear-gradient(135deg, var(--gold-d), var(--gold), var(--gold-l));
  color: #000;
  padding: 6px 14px;
  border-radius: 3px;
  border-bottom: none;
  margin-bottom: 0;
  gap: 5px;
  transition: all .18s;
  white-space: nowrap;
}

.nav-dropdown--wp .nav-dropdown-trigger:hover,
.nav-dropdown--wp.nav-dropdown--open .nav-dropdown-trigger {
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(196,154,31,.4);
}

.nav-dropdown--wp .nav-chevron {
  font-size: 8px;
  opacity: .7;
  color: rgba(0,0,0,.6);
}


/* ══════════════════════════════════════════════════════════════
   CARD FLIP COMPONENT
   ══════════════════════════════════════════════════════════════ */

.card-flip-wrapper {
  perspective: 1000px;
  cursor: pointer;
  display: inline-block;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,.2,.2,1);
}

.card-flip-wrapper.is-flipped .card-flip-inner {
  transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.card-flip-back {
  transform: rotateY(180deg);
}

/* Flip hint label */
.card-flip-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(154,168,184,.3);
  text-align: center;
  margin-top: 10px;
  transition: color .2s;
}
.card-flip-wrapper:hover .card-flip-hint {
  color: rgba(154,168,184,.55);
}

/* Glow: Standard Spielkarte Rückseite */
.card-back-glow-std {
  box-shadow:
    0 0 0 1px rgba(154,168,184,.22),
    0 12px 32px rgba(0,0,0,.85),
    0 0 28px rgba(154,168,184,.06);
  border-radius: 10px;
}

/* Glow: HQ Rückseite (Gold) */
.card-back-glow-hq {
  box-shadow:
    0 0 0 1.5px rgba(196,154,31,.28),
    0 16px 48px rgba(0,0,0,.9),
    0 0 55px rgba(196,154,31,.12),
    0 0 100px rgba(196,154,31,.04);
  border-radius: 10px;
}

/* Hover-Glow verstärken */
.card-flip-wrapper:hover .card-back-glow-std {
  box-shadow:
    0 0 0 1px rgba(154,168,184,.35),
    0 16px 40px rgba(0,0,0,.9),
    0 0 40px rgba(154,168,184,.12);
}
.card-flip-wrapper:hover .card-back-glow-hq {
  box-shadow:
    0 0 0 1.5px rgba(196,154,31,.45),
    0 20px 56px rgba(0,0,0,.95),
    0 0 80px rgba(196,154,31,.22),
    0 0 120px rgba(196,154,31,.08);
}

/* ── Wenn .cw innerhalb von card-flip-front sitzt,
   eigene perspective deaktivieren (übernimmt der Flip-Wrapper) ── */
.card-flip-front .cw {
  perspective: none;
}

/* ── Kartenaufbau-Seite: .cw nie verkleinern ── */
.card-annotation-wrapper .cw {
  width: var(--cw) !important;
  min-width: var(--cw) !important;
}