/* Ziwei skin: dark2 (traditional ink)
   - Strictly scoped to `.ziwei-skin-dark2` to avoid affecting other panels.
*/

.ziwei-skin-dark2 {
  --ziwei-charcoal: #0f1115;
  --ziwei-gold-light: #e6c685;
  --ziwei-gold-dark: #8e6e32;
  --ziwei-matte-black: #16181d;

  background-color: var(--ziwei-charcoal);
  color: rgb(214, 211, 209); /* stone-300-ish */
  font-family: "Noto Serif SC", "Noto Serif KR", serif;
}

.ziwei-skin-dark2 .font-display {
  font-family: "Cinzel", "Noto Serif SC", "Noto Serif KR", serif;
}

.ziwei-skin-dark2 .bg-charcoal {
  background-color: var(--ziwei-charcoal);
}
.ziwei-skin-dark2 .bg-matte-black {
  background-color: var(--ziwei-matte-black);
}
.ziwei-skin-dark2 .text-gold-light {
  color: var(--ziwei-gold-light);
}
.ziwei-skin-dark2 .text-gold-dark {
  color: var(--ziwei-gold-dark);
}
.ziwei-skin-dark2 .bg-gold-light {
  background-color: var(--ziwei-gold-light);
}
.ziwei-skin-dark2 .border-gold-light {
  border-color: var(--ziwei-gold-light);
}

/* Tailwind-ish “color/opacity” class names used by the design snippet */
.ziwei-skin-dark2 .border-gold-dark\/20 {
  border-color: rgba(142, 110, 50, 0.2);
}
.ziwei-skin-dark2 .border-gold-dark\/30 {
  border-color: rgba(142, 110, 50, 0.3);
}
.ziwei-skin-dark2 .border-gold-dark\/40 {
  border-color: rgba(142, 110, 50, 0.4);
}
.ziwei-skin-dark2 .bg-gold-dark\/5 {
  background-color: rgba(142, 110, 50, 0.05);
}
.ziwei-skin-dark2 .bg-gold-dark\/10 {
  background-color: rgba(142, 110, 50, 0.1);
}
.ziwei-skin-dark2 .bg-gold-dark\/20 {
  background-color: rgba(142, 110, 50, 0.2);
}
.ziwei-skin-dark2 .border-gold-light\/60 {
  border-color: rgba(230, 198, 133, 0.6);
}
.ziwei-skin-dark2 .ring-gold-light\/40 {
  --tw-ring-color: rgba(230, 198, 133, 0.4);
}

/* Custom utilities copied from the provided HTML */
.ziwei-skin-dark2 .gold-gradient-border {
  border: 1px solid;
  border-image: linear-gradient(
      to bottom right,
      var(--ziwei-gold-light),
      var(--ziwei-gold-dark),
      var(--ziwei-gold-light)
    )
    1;
}

.ziwei-skin-dark2 .gold-text-gradient {
  background: linear-gradient(to bottom, var(--ziwei-gold-light), #b08d57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ziwei-skin-dark2 .matte-card {
  /* Slightly brighter than pure matte-black so palace cards remain legible on mobile OLED. */
  background: rgba(28, 32, 40, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ziwei-skin-dark2 .flow-arrow {
  filter: drop-shadow(0 0 4px rgba(230, 198, 133, 0.4));
}

.ziwei-skin-dark2 .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}

/* Divider helper for dark2 panels (matches the design's subtle gold line) */
.ziwei-skin-dark2 .dark2-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(142, 110, 50, 0.22),
    transparent
  );
}

.ziwei-skin-dark2 .dark2-grid-lines {
  background: rgba(142, 110, 50, 0.30);
}

/* Slightly nicer scrollbar tint for the ink skin */
.ziwei-skin-dark2 .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(230, 198, 133, 0.22);
}