/*
 * TFM Enchanting Village — Page Styles v2
 * /wp-content/themes/blocksy-child/css/tfm-village.css
 *
 * Baut auf dem globalen System auf:
 *   --area-accent / --area-accent-soft / --area-accent-glow  (Color Theme CSS)
 *   --text-body / --text-dim / --cream                       (Site Settings CSS)
 *   --border-subtle / --border-glow / --bg-page              (Site Settings CSS)
 *   tfm-time-night / tfm-time-sunrise / tfm-time-sunset      (Color Theme JS)
 *   tfm-area-village                                          (Color Theme JS)
 *
 * Hier NUR Village-spezifische Stile und District-Farben
 * die nicht im globalen System existieren.
 */

/* ============================================================
   1. DISTRICT-FARBEN (nur die 5 die NICHT der Village-Akzent sind)
   Wanderers = --area-accent (global, automatisch Tageszeit-aware)
   ============================================================ */
:root {
	/* ── Wanderers — Gold (Farbton via globalem --area-accent) ── */
--wanderers-bg:     rgba(212, 168, 67, 0.065);
--wanderers-border: rgba(212, 168, 67, 0.500);
--wanderers-glow:   rgba(212, 168, 67, 0.220);
--wanderers-tile:   rgba(212, 168, 67, 0.180);
--wanderers-card:   rgba(212, 168, 67, 0.220);
--wanderers-secret: rgba(212, 168, 67, 0.060);
	
  /* ── Feral — Waldgrün ── */
  --feral:            #2d6b3a;
  --feral-s:          #5ab87a;
  --feral-bg:         rgba(45, 107, 58, 0.090);
  --feral-border:     rgba(45, 107, 58, 0.500);
  --feral-glow:       rgba(45, 107, 58, 0.250);
  --feral-tile:       rgba(45, 107, 58, 0.220);
  --feral-card:       rgba(45, 107, 58, 0.260);
  --feral-particle:   rgba(90, 184, 122, 0.450);
  --feral-secret:     rgba(45, 107, 58, 0.070);

  /* ── Devotion — Tiefes Karmesin ── */
  --devotion:         #a0192a;
  --devotion-s:       #cc3050;
  --devotion-bg:      rgba(160, 25, 42, 0.085);
  --devotion-border:  rgba(160, 25, 42, 0.500);
  --devotion-glow:    rgba(160, 25, 42, 0.280);
  --devotion-tile:    rgba(160, 25, 42, 0.200);
  --devotion-card:    rgba(160, 25, 42, 0.240);
  --devotion-secret:  rgba(160, 25, 42, 0.070);

  /* ── Temptations — Vivid Magenta ── */
  --temptations:          #c41e78;
  --temptations-s:        #d040a0;
  --temptations-bg:       rgba(196, 30, 120, 0.085);
  --temptations-border:   rgba(196, 30, 120, 0.500);
  --temptations-glow:     rgba(196, 30, 120, 0.250);
  --temptations-tile:     rgba(196, 30, 120, 0.200);
  --temptations-card:     rgba(196, 30, 120, 0.240);
  --temptations-particle: rgba(208, 64, 160,  0.420);
  --temptations-secret:   rgba(196, 30, 120, 0.070);

  /* ── Ecstasy — Tiefes Indigo-Violett ── */
  --ecstasy:          #6423be;
  --ecstasy-s:        #9040e0;
  --ecstasy-bg:       rgba(100, 35, 190, 0.080);
  --ecstasy-border:   rgba(100, 35, 190, 0.500);
  --ecstasy-glow:     rgba(100, 35, 190, 0.220);
  --ecstasy-tile:     rgba(100, 35, 190, 0.180);
  --ecstasy-card:     rgba(100, 35, 190, 0.220);
  --ecstasy-secret:   rgba(100, 35, 190, 0.060);

  /* ── Archives — Teal ── */
  --archives:         #198ca0;
  --archives-s:       #30b0c8;
  --archives-bg:      rgba(25, 140, 160, 0.080);
  --archives-border:  rgba(25, 140, 160, 0.500);
  --archives-glow:    rgba(25, 140, 160, 0.220);
  --archives-tile:    rgba(25, 140, 160, 0.180);
  --archives-card:    rgba(25, 140, 160, 0.220);
  --archives-secret:  rgba(25, 140, 160, 0.060);
}

/* ============================================================
   2. WAYPOINT BUTTON (position: fixed, top-right)
   ============================================================ */
.tfm-intro-section {
  position: relative !important;
}

/* Startposition: oben rechts im Intro */
.tfm-waypoint-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}

/* Scrolled past intro: wird fixed */
.tfm-waypoint-wrap.is-fixed {
  position: fixed;
  top: 90px;
  right: 4.3rem;
}

.tfm-waypoint__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.10);
  border: 1px solid rgba(212, 168, 67, 0.38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tfm-waypoint__btn:hover {
  background: rgba(212, 168, 67, 0.20);
  border-color: var(--area-accent-soft);
  box-shadow: 0 0 16px var(--area-accent-glow);
}
.tfm-waypoint__btn.is-open {
  background: rgba(212, 168, 67, 0.22);
  border-color: var(--area-accent);
  box-shadow: 0 0 20px var(--area-accent-glow);
}
.tfm-waypoint__btn svg {
  width: 19px;
  height: 19px;
  stroke: var(--area-accent-soft);
}

/* ============================================================
   3. WAYPOINT POPUP
   ============================================================ */
.tfm-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 1.5rem);
  background: rgba(12, 7, 26, 0.98);
  border: 1px solid rgba(212, 168, 67, 0.38);
  border-radius: 14px;
  padding: 1.4rem;
  z-index: 200;
  display: none;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6);
}
.tfm-popup.is-open {
  display: block;
  animation: tfmPopIn 0.22s ease;
}
@keyframes tfmPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tfm-popup__inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.tfm-popup__figure { flex: 0 0 auto; }
.tfm-popup__body   { flex: 1; min-width: 0; }
.tfm-popup__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.96rem;
  color: var(--area-accent-soft);
  margin: 0 0 0.9rem;
  line-height: 1.4;
}
.tfm-popup__empty {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.tfm-stat { margin-bottom: 0.72rem; }
.tfm-stat:last-child { margin-bottom: 0; }
.tfm-stat__name {
  display: block;
  font-size: 0.59rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.18rem;
  font-family: 'Jost', sans-serif;
}
.tfm-stat__row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.tfm-stat__pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  line-height: 1;
}
.tfm-stat__time {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}
.tfm-stat--wanderers   .tfm-stat__pct { color: var(--area-accent-soft); }
.tfm-stat--feral       .tfm-stat__pct { color: var(--feral-s); }
.tfm-stat--devotion    .tfm-stat__pct { color: var(--devotion-s); }
.tfm-stat--temptations .tfm-stat__pct { color: var(--temptations-s); }
.tfm-stat--ecstasy     .tfm-stat__pct { color: var(--ecstasy-s); }
.tfm-stat--archives    .tfm-stat__pct { color: var(--archives-s); }

.tfm-popup__divider { height: 1px; background: var(--border-subtle); margin: 0.85rem 0; }
.tfm-popup__reset {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.tfm-popup__reset:hover { color: var(--text-body); }

/* ============================================================
   4. HERO SECTION — Elementor Container Build
   Struktur: .tfm-hero Container (outer) → .tfm-hero__text Container (inner)
   Hintergrundbild wird in Elementor gesetzt (einfach austauschbar).
   CSS liefert: Fallback-Gradient, Tageszeit-Tint, unterer Overlay.
   ============================================================ */

.tfm-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 320px;
  max-height: 520px;
  /* Fallback-Hintergrund wenn kein Bild in Elementor gesetzt */
  background-color: var(--time-bg, #0d0a1a);
}

/* Tageszeit-Tint — liegt als semi-transparente Schicht über dem Bild */
.tfm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 1.4s ease;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    transparent         55%
  );
}
body.tfm-time-night   .tfm-hero::before { background: rgba(7,   5, 16, 0.32); }
body.tfm-time-sunrise .tfm-hero::before { background: rgba(15, 12, 28, 0.14); }
body.tfm-time-sunset  .tfm-hero::before { background: rgba(30, 14, 30, 0.20); }

/* Unterer dunkler Gradient — immer aktiv, für Lesbarkeit der Texte */
.tfm-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 7, 20, 0.88) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Text-Container — Elementor setzt ihn via Justify Content ans untere Ende */
.tfm-hero__text {
  position: relative;
  z-index: 3;
  padding: 0 0 1.8rem 2.2rem;
  width: 100%;
}

/* Heading-Widget im Hero */
.tfm-hero__h1 .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.8rem, 5vw, 3rem) !important;
  color: var(--area-accent-soft) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* Text-Widget (Untertitel) im Hero */
.tfm-hero__sub p {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}

/* ============================================================
   5. LATEST POSTS STRIP
   ============================================================ */
.tfm-latest {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}
.tfm-latest__head {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tfm-latest__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.tfm-post-card {
  display: none;
  flex-direction: row;
  background: rgba(18, 12, 34, 0.80);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.tfm-post-card.is-active {
  display: flex;
  animation: tfmFadeIn 0.6s ease;
}
@keyframes tfmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tfm-post-card__img {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}
.tfm-post-card__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.tfm-post-card__img svg {
  width: 36px; height: 36px; opacity: 0.35;
  fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.tfm-post-card--wanderers .tfm-post-card__img { background: linear-gradient(135deg, var(--wanderers-card), rgba(10,6,22,0.92)); }
.tfm-post-card--feral       .tfm-post-card__img { background: linear-gradient(135deg, var(--feral-card),       rgba(10,6,22,0.92)); }
.tfm-post-card--devotion    .tfm-post-card__img { background: linear-gradient(135deg, var(--devotion-card),    rgba(10,6,22,0.92)); }
.tfm-post-card--temptations .tfm-post-card__img { background: linear-gradient(135deg, var(--temptations-card), rgba(10,6,22,0.92)); }
.tfm-post-card--ecstasy     .tfm-post-card__img { background: linear-gradient(135deg, var(--ecstasy-card),     rgba(10,6,22,0.92)); }
.tfm-post-card--archives    .tfm-post-card__img { background: linear-gradient(135deg, var(--archives-card),    rgba(10,6,22,0.92)); }

.tfm-post-card--wanderers   .tfm-post-card__img svg { stroke: var(--area-accent-soft); }
.tfm-post-card--feral       .tfm-post-card__img svg { stroke: var(--feral-s); }
.tfm-post-card--devotion    .tfm-post-card__img svg { stroke: var(--devotion-s); }
.tfm-post-card--temptations .tfm-post-card__img svg { stroke: var(--temptations-s); }
.tfm-post-card--ecstasy     .tfm-post-card__img svg { stroke: var(--ecstasy-s); }
.tfm-post-card--archives    .tfm-post-card__img svg { stroke: var(--archives-s); }

.tfm-post-card__body {
  flex: 1;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tfm-post-card__tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tfm-post-card--wanderers   .tfm-post-card__tag { color: var(--area-accent-soft); }
.tfm-post-card--feral       .tfm-post-card__tag { color: var(--feral-s); }
.tfm-post-card--devotion    .tfm-post-card__tag { color: var(--devotion-s); }
.tfm-post-card--temptations .tfm-post-card__tag { color: var(--temptations-s); }
.tfm-post-card--ecstasy     .tfm-post-card__tag { color: var(--ecstasy-s); }
.tfm-post-card--archives    .tfm-post-card__tag { color: var(--archives-s); }

.tfm-post-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 1.2rem; color: var(--cream); line-height: 1.3; margin: 0;
}
.tfm-post-card__excerpt {
  font-family: 'Jost', sans-serif;
  font-size: 0.79rem; color: var(--text-dim); line-height: 1.65; flex: 1; margin: 0;
}
.tfm-post-card__date {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem; color: var(--text-dim); margin: 0;
}
.tfm-post-dots {
  display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.85rem;
}
.tfm-post-dot {
  width: 6px; height: 6px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.15); transition: background 0.3s ease; padding: 0;
}
.tfm-post-dot.is-active { background: var(--area-accent-soft); }

/* ============================================================
   6. VILLAGE CONTAINER + INTRO
   ============================================================ */
.tfm-village {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 3.5rem;
  font-family: 'Jost', sans-serif;
}
.tfm-intro { text-align: center; margin-bottom: 2.4rem; }
.tfm-intro p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.06rem; color: var(--text-dim);
  max-width: 420px; margin: 0 auto; line-height: 1.85;
}

/* ============================================================
   7. DISTRICT BANDS
   ============================================================ */
.tfm-band {
  position: relative; overflow: hidden;
  border-radius: 0 14px 14px 0;
  border-left: 3px solid transparent;
  padding: 1.4rem 1.6rem; margin-bottom: 4rem !important;
  transition: box-shadow 1.0s ease;
}
.tfm-band--wanderers   { background: var(--wanderers-bg); border-color: var(--wanderers-border); }
.tfm-band--feral       { background: var(--feral-bg);       border-color: var(--feral-border); }
.tfm-band--devotion    { background: var(--devotion-bg);    border-color: var(--devotion-border); }
.tfm-band--temptations { background: var(--temptations-bg); border-color: var(--temptations-border); }
.tfm-band--ecstasy     { background: var(--ecstasy-bg);     border-color: var(--ecstasy-border); }
.tfm-band--archives    { background: var(--archives-bg);    border-color: var(--archives-border); }

/* Hover shadow — nach Tier-Regeln damit Hover gewinnt */
.tfm-band--wanderers:hover { box-shadow: -3px 0 32px var(--wanderers-glow); }
.tfm-band--feral:hover       { box-shadow: -3px 0 32px var(--feral-glow); }
.tfm-band--devotion:hover    { box-shadow: -3px 0 32px var(--devotion-glow); }
.tfm-band--temptations:hover { box-shadow: -3px 0 32px var(--temptations-glow); }
.tfm-band--ecstasy:hover     { box-shadow: -3px 0 32px var(--ecstasy-glow); }
.tfm-band--archives:hover    { box-shadow: -3px 0 32px var(--archives-glow); }

/* Decorative background motif */
.tfm-band__motif {
  position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.8s ease;
  width: 90px; height: 90px;
}
.tfm-band.t1 .tfm-band__motif { opacity: 0.09; }
.tfm-band.t2 .tfm-band__motif { opacity: 0.20; }

/* Band text */
.tfm-band__name {
  position: relative; z-index: 2;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 1.22rem; margin: 0 0 0.3rem;
}
.tfm-band--wanderers   .tfm-band__name { color: var(--area-accent-soft); }
.tfm-band--feral       .tfm-band__name { color: var(--feral-s); }
.tfm-band--devotion    .tfm-band__name { color: var(--devotion-s); }
.tfm-band--temptations .tfm-band__name { color: var(--temptations-s); }
.tfm-band--ecstasy     .tfm-band__name { color: var(--ecstasy-s); }
.tfm-band--archives    .tfm-band__name { color: var(--archives-s); }

.tfm-band__mood {
  position: relative; z-index: 2;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.9rem; color: var(--text-dim); margin: 0 0 1.1rem; min-height: 1.35em;
}

/* ============================================================
   8. TILE GRID
   ============================================================ */
.tfm-tiles {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem;
}
.tfm-tile {
  display: block; background: rgba(14, 9, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 10px;
  overflow: hidden; cursor: pointer; color: var(--text-body);
  text-decoration: none; transition: border-color 0.3s ease, transform 0.3s ease;
}
.tfm-tile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
.tfm-tile__img {
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden;
}
.tfm-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-tile__img svg {
  width: 30px; height: 30px; opacity: 0.38;
  fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.tfm-band--wanderers   .tfm-tile__img { background: linear-gradient(155deg, var(--wanderers-tile), rgba(8,5,18,0.94)); }
.tfm-band--feral       .tfm-tile__img { background: linear-gradient(155deg, var(--feral-tile),       rgba(8,5,18,0.94)); }
.tfm-band--devotion    .tfm-tile__img { background: linear-gradient(155deg, var(--devotion-tile),    rgba(8,5,18,0.94)); }
.tfm-band--temptations .tfm-tile__img { background: linear-gradient(155deg, var(--temptations-tile), rgba(8,5,18,0.94)); }
.tfm-band--ecstasy     .tfm-tile__img { background: linear-gradient(155deg, var(--ecstasy-tile),     rgba(8,5,18,0.94)); }
.tfm-band--archives    .tfm-tile__img { background: linear-gradient(155deg, var(--archives-tile),    rgba(8,5,18,0.94)); }
.tfm-band--wanderers   .tfm-tile__img svg { stroke: var(--area-accent-soft); }
.tfm-band--feral       .tfm-tile__img svg { stroke: var(--feral-s); }
.tfm-band--devotion    .tfm-tile__img svg { stroke: var(--devotion-s); }
.tfm-band--temptations .tfm-tile__img svg { stroke: var(--temptations-s); }
.tfm-band--ecstasy     .tfm-tile__img svg { stroke: var(--ecstasy-s); }
.tfm-band--archives    .tfm-tile__img svg { stroke: var(--archives-s); }

.tfm-tile__body { padding: 0.75rem 0.8rem; }
.tfm-tile__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.02rem; color: var(--cream); margin: 0 0 0.3rem; line-height: 1.2;
}
.tfm-tile__desc {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; color: var(--text-dim); line-height: 1.55; margin: 0;
}

/* Secret tile row */
.tfm-secret-row,
.tfm-secret-row.e-con {
  position: relative !important;
  z-index: 2 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  transition: max-height 1.0s ease, opacity 0.9s ease, margin-top 0.9s ease;
}
.tfm-band.t2 .tfm-secret-row,
.tfm-band.t2 .tfm-secret-row.e-con {
  max-height: 600px !important;
  opacity: 1 !important;
  margin-top: 0.85rem !important;
  padding: 0 !important;
}
.tfm-tile--secret {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 0.9rem; text-align: center;
  border-style: dashed !important; border-color: rgba(255, 255, 255, 0.12) !important;
  padding: 0.85rem; background: none;
}
.tfm-tile--secret .secret-glyph { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; opacity: 0.65; }
.tfm-band--wanderers   .tfm-tile--secret { background: linear-gradient(135deg, var(--wanderers-secret), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--feral       .tfm-tile--secret { background: linear-gradient(135deg, var(--feral-secret),       rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--devotion    .tfm-tile--secret { background: linear-gradient(135deg, var(--devotion-secret),    rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--temptations .tfm-tile--secret { background: linear-gradient(135deg, var(--temptations-secret), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--ecstasy     .tfm-tile--secret { background: linear-gradient(135deg, var(--ecstasy-secret),     rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--archives    .tfm-tile--secret { background: linear-gradient(135deg, var(--archives-secret),    rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }

/* ============================================================
   9. AMBIENT PARTICLES
   ============================================================ */
.tfm-p {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.tfm-band--wanderers .tfm-p,
.tfm-band--devotion  .tfm-p,
.tfm-band--archives  .tfm-p { width: 4px; height: 4px; bottom: var(--p-bottom, 14%); !important; }

.tfm-band--wanderers .tfm-p { background: var(--area-accent-soft); }
.tfm-band--devotion  .tfm-p { background: var(--devotion-s); }
.tfm-band--archives  .tfm-p { background: var(--archives-s); }
.tfm-band--wanderers .tfm-p--base,
.tfm-band--devotion  .tfm-p--base,
.tfm-band--archives  .tfm-p--base { animation: tfmEmb var(--dur, 6s) ease-in infinite; }
.tfm-band--wanderers .tfm-p--t1,
.tfm-band--devotion  .tfm-p--t1,
.tfm-band--archives  .tfm-p--t1   { animation: tfmEmb var(--dur, 5s) ease-in infinite; }
.tfm-band--wanderers .tfm-p--t2,
.tfm-band--devotion  .tfm-p--t2,
.tfm-band--archives  .tfm-p--t2   { animation: tfmEmb var(--dur, 4.4s) ease-in infinite; }

.tfm-band--feral       .tfm-p { background: radial-gradient(circle, var(--feral-particle),       transparent 70%); }
.tfm-band--temptations .tfm-p { background: radial-gradient(circle, var(--temptations-particle), transparent 70%); }
}
.tfm-band--feral       .tfm-p { background: radial-gradient(circle, rgba(90, 184,122,0.45), transparent 70%); }
.tfm-band--temptations .tfm-p { background: radial-gradient(circle, rgba(208, 64,160,0.42), transparent 70%); }
.tfm-band--feral       .tfm-p--base,
.tfm-band--temptations .tfm-p--base { animation: tfmSmk var(--dur, 11s) ease-in-out infinite; }
.tfm-band--feral       .tfm-p--t1,
.tfm-band--temptations .tfm-p--t1   { animation: tfmSmk var(--dur, 8.5s) ease-in-out infinite; }
.tfm-band--feral       .tfm-p--t2,
.tfm-band--temptations .tfm-p--t2   { animation: tfmSmk var(--dur, 13s) ease-in-out infinite; }

.tfm-band--ecstasy .tfm-p { width: 5px; height: 5px; background: var(--ecstasy-s); top: var(--p-top, -8px); !important;}
.tfm-band--ecstasy .tfm-p--base { animation: tfmPet var(--dur, 8s)   linear infinite; }
.tfm-band--ecstasy .tfm-p--t1   { animation: tfmPet var(--dur, 6.2s) linear infinite; }
.tfm-band--ecstasy .tfm-p--t2   { animation: tfmPet var(--dur, 9.8s) linear infinite; }

.tfm-p--t1, .tfm-p--t2 { display: none; }
.tfm-band.t1 .tfm-p--t1, .tfm-band.t2 .tfm-p--t1 { display: block; }
.tfm-band.t2 .tfm-p--t2 { display: block; }

@keyframes tfmEmb {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.95; }
  85%  { opacity: 0; }
  100% { transform: translateY(-85px) scale(0.3); opacity: 0; }
}
@keyframes tfmSmk {
  0%   { transform: translate(0, 5px) scale(0.65); opacity: 0; }
  30%  { opacity: 0.52; }
  100% { transform: translate(46px, -56px) scale(1.45); opacity: 0; }
}
@keyframes tfmPet {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.88; }
  100% { transform: translate(-30px, 95px) rotate(185deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-p { display: none !important; }
  .tfm-band__motif { transition: none; }
  .tfm-band__mood  { transition: none; }
  .tfm-secret-row  { transition: none; }
  .tfm-band        { transition: none; }
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .tfm-tiles { grid-template-columns: 1fr 1fr; }
  .tfm-post-card { flex-direction: column; }
  .tfm-post-card__img { flex: none; min-height: 90px; }
  .tfm-hero__text { left: 1.2rem; bottom: 1.2rem; }
  .tfm-village, .tfm-latest { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 420px) {
  .tfm-tiles { grid-template-columns: 1fr; }
}

/* ── Latest Posts Plugin Override ── */

/* Einzelne Karte */
.latest-post-selection article {
  background: rgba(18, 12, 34, 0.85) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.latest-post-selection article:hover {
  border-color: var(--area-accent-glow) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.12) !important;
}

/* Bild */
.latest-post-selection .article_image img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Text-Bereich */
.latest-post-selection .article_info {
  padding: 1rem !important;
  background: transparent !important;
}

/* Titel */
.latest-post-selection .article__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.6rem !important;
}

/* Read more Link */
.latest-post-selection .article_link.read-more {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  color: var(--area-accent-soft) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
}
.latest-post-selection .article_link.read-more:hover {
  color: var(--area-accent) !important;
}

/* ── Latest Posts Schriftart ── */
.latest-post-selection h3.article__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* ── Latest Posts — Goldene Akzente + Tageszeit ── */

/* Goldener Border immer sichtbar, subtil */
.latest-post-selection article {
  border: 1px solid rgba(212, 168, 67, 0.25) !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Goldener Glow beim Hover */
.latest-post-selection article:hover {
  border-color: var(--area-accent) !important;
  box-shadow: 0 0 22px rgba(212, 168, 67, 0.18) !important;
  transform: translateY(-3px) !important;
}

/* Titel-Farbe via CSS-Variable — passt sich automatisch an Tageszeit an */
.latest-post-selection h3.article__title,
.latest-post-selection h3.article__title a {
  color: var(--area-accent-soft) !important;
}

/* Hintergrund per Tageszeit — überschreibt den hardcodierten Wert im Shortcode */
.latest-post-selection article {
  background: rgba(18, 6, 30, 0.88) !important;
}
body.tfm-time-night .latest-post-selection article {
  background: rgba(7, 5, 16, 0.92) !important;
}
body.tfm-time-sunrise .latest-post-selection article {
  background: rgba(15, 10, 28, 0.88) !important;
}
body.tfm-time-sunset .latest-post-selection article {
  background: rgba(18, 8, 24, 0.90) !important;
}

.tfm-band { padding: 1.4rem 1.6rem !important; }
.tfm-tiles { display: grid !important; }

.tfm-tiles.e-con {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.85rem !important;
}
.tfm-tiles.e-con > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════
   VILLAGE BACKGROUND — Nebel + Energiewellen
   Tageszeit-Klassen kommen vom globalen Color
   Theme JS (tfm-time-night / sunrise / sunset)
══════════════════════════════════════════════ */

.tfm-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* CSS-Variablen Standard = Tag (kein Tageszeit-Klasse) */
  --tfm-fog-a:   rgba(130, 70, 255, 0.22);
  --tfm-fog-b:   rgba(100, 50, 220, 0.18);
  --tfm-fog-c:   rgba(110, 60, 240, 0.14);
  --tfm-base-1:  rgba(140, 70, 255, 0.28);
  --tfm-base-2:  rgba(100, 40, 200, 0.22);
  --tfm-ring-1:  rgba(212, 168, 67,  0.06);
  --tfm-ring-2:  rgba(180, 120, 255, 0.05);
  --tfm-ring-3:  rgba(200, 160, 255, 0.05);
  --tfm-core:    rgba(212, 168, 67,  0.18);
}
/* Nacht */
body.tfm-time-night .tfm-bg-canvas {
  --tfm-fog-a:   rgba(100, 50, 220, 0.20);
  --tfm-fog-b:   rgba(70,  30, 180, 0.16);
  --tfm-fog-c:   rgba(90,  45, 200, 0.12);
  --tfm-base-1:  rgba(90,  30, 200, 0.24);
  --tfm-base-2:  rgba(60,  15, 160, 0.20);
  --tfm-ring-1:  rgba(212, 168, 67,  0.08);
  --tfm-ring-2:  rgba(176, 110, 255, 0.07);
  --tfm-ring-3:  rgba(200, 160, 255, 0.06);
  --tfm-core:    rgba(212, 168, 67,  0.28);
}
/* Morgendämmerung */
body.tfm-time-sunrise .tfm-bg-canvas {
  --tfm-fog-a:   rgba(160, 90,  50,  0.18);
  --tfm-fog-b:   rgba(110, 60, 170, 0.14);
  --tfm-fog-c:   rgba(140, 80,  40,  0.12);
  --tfm-base-1:  rgba(160, 90,  40,  0.20);
  --tfm-base-2:  rgba(100, 50, 160, 0.16);
  --tfm-ring-1:  rgba(240, 192, 96,  0.08);
  --tfm-ring-2:  rgba(160, 100, 220, 0.06);
  --tfm-ring-3:  rgba(210, 160, 80,  0.06);
  --tfm-core:    rgba(240, 192, 96,  0.32);
}
/* Abenddämmerung */
body.tfm-time-sunset .tfm-bg-canvas {
  --tfm-fog-a:   rgba(160, 45,  90,  0.20);
  --tfm-fog-b:   rgba(120, 30,  90,  0.16);
  --tfm-fog-c:   rgba(100, 35,  70,  0.12);
  --tfm-base-1:  rgba(150, 40,  90,  0.22);
  --tfm-base-2:  rgba(110, 20,  70,  0.18);
  --tfm-ring-1:  rgba(232, 144, 96,  0.08);
  --tfm-ring-2:  rgba(160,  60, 120, 0.06);
  --tfm-ring-3:  rgba(180,  90, 140, 0.06);
  --tfm-core:    rgba(232, 144, 96,  0.28);
}

/* Lila Tiefe */
.tfm-bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 28% 38%, var(--tfm-base-1) 0%, transparent 62%),
    radial-gradient(ellipse 65% 48% at 74% 58%, var(--tfm-base-2) 0%, transparent 58%),
    radial-gradient(ellipse 55% 38% at 50%  8%, rgba(140,60,255,0.14) 0%, transparent 52%);
  transition: background 1.4s ease;
}

/* Nebel-Schichten */
.tfm-fog {
  position: absolute; border-radius: 50%;
  filter: blur(55px);
  transition: background 1.4s ease;
}
.tfm-fog-1 { width:210%; height:200px; bottom:30%; left:-22%; background:radial-gradient(ellipse, var(--tfm-fog-a) 0%, transparent 68%); animation:tfmFogA 22s ease-in-out infinite alternate; }
.tfm-fog-2 { width:185%; height:160px; bottom:15%; left:0%;   background:radial-gradient(ellipse, var(--tfm-fog-b) 0%, transparent 64%); animation:tfmFogB 28s ease-in-out infinite alternate; }
.tfm-fog-3 { width:225%; height:110px; bottom:4%;  left:-18%; background:radial-gradient(ellipse, var(--tfm-fog-a) 0%, transparent 60%); animation:tfmFogA 19s ease-in-out infinite alternate-reverse; filter:blur(40px); opacity:0.88; }
.tfm-fog-4 { width:170%; height:175px; top:14%;   right:-22%; background:radial-gradient(ellipse, var(--tfm-fog-c) 0%, transparent 64%); animation:tfmFogB 32s ease-in-out infinite alternate; filter:blur(68px); opacity:0.65; }
.tfm-fog-5 { width:145%; height:135px; top:36%;   left:-12%;  background:radial-gradient(ellipse, var(--tfm-fog-b) 0%, transparent 62%); animation:tfmFogA 24s ease-in-out infinite alternate-reverse; filter:blur(52px); opacity:0.60; }

@keyframes tfmFogA { 0%{transform:translateX(0px) scaleY(1.00)} 100%{transform:translateX(72px) scaleY(1.20)} }
@keyframes tfmFogB { 0%{transform:translateX(0px) scaleY(1.00)} 100%{transform:translateX(-58px) scaleY(0.86)} }

/* Energiewellen — immer nur eine sichtbar */
.tfm-energy-wrap { position: absolute; inset: 0; pointer-events: none; }

@keyframes tfmRingPulse {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0;    }
  2%   { opacity: 1;                                                  }
  30%  { transform: translate(-50%,-50%) scale(5.8);  opacity: 0.05; }
  33%  { transform: translate(-50%,-50%) scale(6.2);  opacity: 0;    }
  34%  { transform: translate(-50%,-50%) scale(0);    opacity: 0;    }
  100% { transform: translate(-50%,-50%) scale(0);    opacity: 0;    }
}

.tfm-e-ring {
  position: absolute;
  top: 42%; left: 50%;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 0.6px solid;
  animation: tfmRingPulse 30s ease-out infinite;
  transition: border-color 1.4s ease;
}
.tfm-e-r1 { border-color: var(--tfm-ring-1); animation-delay: 0s;  }
.tfm-e-r2 { border-color: var(--tfm-ring-2); animation-delay: 10s; }
.tfm-e-r3 { border-color: var(--tfm-ring-3); animation-delay: 20s; }

.tfm-e-core {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tfm-core);
  box-shadow: 0 0 12px 4px var(--tfm-core);
  animation: tfmCorePulse 10s ease-in-out infinite;
  transition: background 1.4s ease, box-shadow 1.4s ease;
}
@keyframes tfmCorePulse {
  0%,100% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.5; }
  50%      { transform: translate(-50%,-50%) scale(1.2); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-fog, .tfm-e-ring, .tfm-e-core { animation: none !important; }
}

/* ── Sterne (nur bei Nacht sichtbar) ── */
.tfm-stars-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.5s ease;
}
body.tfm-time-night   .tfm-stars-wrap { opacity: 1.0; }
body.tfm-time-sunset  .tfm-stars-wrap { opacity: 0.55; }
body.tfm-time-sunrise .tfm-stars-wrap { opacity: 0.30; }
/* Tag: bleibt bei 0 */

/* Schicht A — hellere Sterne, 4s Twinkle */
.tfm-stars-a {
  position: absolute; inset: 0;
  animation: tfmStarTwinkle 4s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle 1.8px at  8%  7%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 16%  3%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(circle 2.0px at 24% 12%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 33%  5%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 41% 15%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 50%  2%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(circle 2.0px at 58%  9%, rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 66%  6%, rgba(255,255,255,0.72) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 74% 13%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 82%  4%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(circle 2.0px at 90% 10%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 12% 24%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 29% 28%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 46% 20%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 63% 26%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 78% 22%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 94% 18%, rgba(255,255,255,0.55) 0%, transparent 100%),
    /* Zwei warm-goldene Sterne für Village-Charakter */
    radial-gradient(circle 2.2px at 36% 8%,  rgba(232,201,122,0.85) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 71% 4%,  rgba(232,201,122,0.75) 0%, transparent 100%);
}

/* Schicht B — dimmer, 6s Twinkle (versetzt) */
.tfm-stars-b {
  position: absolute; inset: 0;
  animation: tfmStarTwinkle 6s ease-in-out infinite alternate-reverse;
  background-image:
    radial-gradient(circle 1.2px at  4% 14%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 20% 19%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 37% 17%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 53% 11%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 69% 21%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 85% 15%, rgba(255,255,255,0.48) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 10% 34%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 27% 38%, rgba(255,255,255,0.38) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 44% 32%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 60% 36%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 76% 31%, rgba(255,255,255,0.42) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 92% 37%, rgba(255,255,255,0.38) 0%, transparent 100%);
}

@keyframes tfmStarTwinkle {
  0%   { opacity: 0.70; }
  100% { opacity: 1.00; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-stars-a, .tfm-stars-b { animation: none; }
}

.tfm-tiles.e-con {
  max-width: 820px !important;
}
/* ── Secret Tile Größe — auf eine Kachel-Breite begrenzen ── */
.tfm-secret-row.e-con {
  max-width: 820px !important;
}

/* ── Tile Typografie — Elementor Widget Selektoren ── */
.tfm-tile__name .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  color: #f0e8d8 !important;
  line-height: 1.2 !important;
  margin: 0 0 0.3rem !important;
}
.tfm-tile__desc p {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.75rem !important;
  color: #9a8fbb !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── Secret Tile als 4. Kachel rechts ── */
.tfm-content-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}
.tfm-content-row > .tfm-tiles.e-con {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Secret row: standardmäßig eingeklappt */
.tfm-content-row > .tfm-secret-row,
.tfm-content-row > .tfm-secret-row.e-con {
  flex: 0 0 0px !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-left: 1px solid transparent !important;
  transition: flex-basis 0.9s ease, max-width 0.9s ease,
              opacity 0.9s ease, margin-left 0.9s ease,
              padding-left 0.9s ease, border-color 0.9s ease !important;
  pointer-events: none !important;
}

/* Secret row: sichtbar bei Tier 2 */
.tfm-band.t2 .tfm-content-row > .tfm-secret-row,
.tfm-band.t2 .tfm-content-row > .tfm-secret-row.e-con {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  max-height: none !important;
  opacity: 1 !important;
  margin-left: 1rem !important;
  padding-left: 1rem !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  pointer-events: auto !important;
}

/* ── Secret Tile horizontal fix ── */
.tfm-content-row .tfm-secret-row {
  flex: 0 0 264px !important;
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
}
.tfm-band.t2 .tfm-content-row .tfm-secret-row {
  flex: 0 0 264px !important;
  width: 264px !important;
}
.tfm-content-row .tfm-secret-row > .e-con {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ── Tiles: universelle Gold-Akzentfarbe (Tageszeit-aware via --area-accent) ── */
.tfm-tile {
  border-color: var(--area-accent-glow) !important;
}
.tfm-tile:hover {
  border-color: var(--area-accent-soft) !important;
  box-shadow: 0 4px 18px var(--area-accent-glow) !important;
}

/* ── Secret Tiles: Distrikt-Farbhauch + Gold-Akzent Border ── */
.tfm-band--wanderers   .tfm-tile--secret { background: linear-gradient(135deg, rgba(212,168,67, 0.06), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--feral       .tfm-tile--secret { background: linear-gradient(135deg, rgba(45, 107,58, 0.07), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--devotion    .tfm-tile--secret { background: linear-gradient(135deg, rgba(160,25, 42, 0.07), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--temptations .tfm-tile--secret { background: linear-gradient(135deg, rgba(196,30, 120,0.07), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--ecstasy     .tfm-tile--secret { background: linear-gradient(135deg, rgba(100,35, 190,0.06), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }
.tfm-band--archives    .tfm-tile--secret { background: linear-gradient(135deg, rgba(25, 140,160,0.06), rgba(5,3,14,0.85)) !important; border-color: var(--area-accent-glow) !important; }

.tfm-secret-row > .tfm-tile--secret.e-con {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
}