/* ==========================================================================
   Dědkova Crew — Neon Cyberpunk design
   ==========================================================================
   Pink/magenta + cyan neon palette on dark background.
   ========================================================================== */

:root {
  /* ── Surfaces ── */
  --dp-ink: #080811;
  --dp-ink-2: #0e0e1a;
  --dp-ink-3: #161626;
  --dp-line: rgba(255, 255, 255, 0.07);

  /* ── Primary accent: neon pink/magenta ── */
  --dp-pink: #ff2d78;
  --dp-pink-dim: #cc1a5e;
  --dp-pink-soft: rgba(255, 45, 120, 0.12);
  --dp-pink-border: rgba(255, 45, 120, 0.45);
  --dp-glow-pink: 0 0 8px rgba(255, 45, 120, 0.6), 0 0 30px rgba(255, 45, 120, 0.25);
  --dp-glow-pink-strong: 0 0 10px rgba(255, 45, 120, 0.7), 0 0 40px rgba(255, 45, 120, 0.35), 0 0 80px rgba(255, 45, 120, 0.15);

  /* ── Secondary accent: neon cyan ── */
  --dp-cyan: #00e5ff;
  --dp-cyan-dim: #00b8cc;
  --dp-cyan-soft: rgba(0, 229, 255, 0.10);
  --dp-cyan-border: rgba(0, 229, 255, 0.40);
  --dp-glow-cyan: 0 0 8px rgba(0, 229, 255, 0.55), 0 0 28px rgba(0, 229, 255, 0.22);
  --dp-glow-cyan-strong: 0 0 10px rgba(0, 229, 255, 0.7), 0 0 40px rgba(0, 229, 255, 0.3), 0 0 80px rgba(0, 229, 255, 0.12);

  /* ── Tertiary: gold (kept for stats/badges) ── */
  --dp-gold: #f0a830;
  --dp-gold-soft: rgba(240, 168, 48, 0.14);
  --dp-gold-border: rgba(240, 168, 48, 0.35);
  --dp-glow-gold: 0 0 8px rgba(240, 168, 48, 0.55), 0 0 28px rgba(240, 168, 48, 0.25);

  /* ── Streamer color-coding (Program streamů) — 15 total w/ pink/cyan/gold above ── */
  --dp-purple: #b026ff;
  --dp-glow-purple: 0 0 8px rgba(176, 38, 255, 0.55), 0 0 28px rgba(176, 38, 255, 0.25);
  --dp-green: #39ff88;
  --dp-glow-green: 0 0 8px rgba(57, 255, 136, 0.55), 0 0 28px rgba(57, 255, 136, 0.25);
  --dp-red: #ff3b3b;
  --dp-glow-red: 0 0 8px rgba(255, 59, 59, 0.55), 0 0 28px rgba(255, 59, 59, 0.25);
  --dp-orange: #ff8a00;
  --dp-glow-orange: 0 0 8px rgba(255, 138, 0, 0.55), 0 0 28px rgba(255, 138, 0, 0.25);
  --dp-yellow: #ffea00;
  --dp-glow-yellow: 0 0 8px rgba(255, 234, 0, 0.55), 0 0 28px rgba(255, 234, 0, 0.25);
  --dp-lime: #aaff00;
  --dp-glow-lime: 0 0 8px rgba(170, 255, 0, 0.55), 0 0 28px rgba(170, 255, 0, 0.25);
  --dp-teal: #00ffc8;
  --dp-glow-teal: 0 0 8px rgba(0, 255, 200, 0.55), 0 0 28px rgba(0, 255, 200, 0.25);
  --dp-blue: #2979ff;
  --dp-glow-blue: 0 0 8px rgba(41, 121, 255, 0.55), 0 0 28px rgba(41, 121, 255, 0.25);
  --dp-indigo: #6c5ce7;
  --dp-glow-indigo: 0 0 8px rgba(108, 92, 231, 0.55), 0 0 28px rgba(108, 92, 231, 0.25);
  --dp-magenta: #ff00e5;
  --dp-glow-magenta: 0 0 8px rgba(255, 0, 229, 0.55), 0 0 28px rgba(255, 0, 229, 0.25);
  --dp-rose: #ff5c8a;
  --dp-glow-rose: 0 0 8px rgba(255, 92, 138, 0.55), 0 0 28px rgba(255, 92, 138, 0.25);
  --dp-white: #f5f5ff;
  --dp-glow-white: 0 0 8px rgba(245, 245, 255, 0.55), 0 0 28px rgba(245, 245, 255, 0.25);

  /* ── Text ── */
  --dp-text: #eeeef6;
  --dp-text-dim: #8a85a0;
  --dp-text-faint: #504b65;

  /* ── Type ── */
  --dp-font-display: 'Bebas Neue', sans-serif;
  --dp-font-body: 'Inter', sans-serif;

  /* ── Bootstrap overrides ── */
  --bs-body-bg: var(--dp-ink);
  --bs-body-color: var(--dp-text);
  --bs-body-font-family: var(--dp-font-body);
  --bs-primary: var(--dp-pink);
  --bs-primary-rgb: 255, 45, 120;
  --bs-link-color: var(--dp-cyan);
  --bs-link-hover-color: var(--dp-pink);
  --bs-border-color: var(--dp-line);
}

body {
  background-color: var(--dp-ink);
  color: var(--dp-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.container {
  --bs-gutter-x: 3rem;
}

a {
  text-decoration: none;
}

::selection {
  background: var(--dp-pink-soft);
  color: var(--dp-pink);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, .dp-display {
  font-family: var(--dp-font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
}

.dp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dp-font-display);
  font-size: 0.8rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink);
}

.dp-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  animation: dp-pulse 2s infinite;
}

.dp-gold-text {
  color: var(--dp-gold);
  text-shadow: var(--dp-glow-gold);
}

.dp-text-dim {
  color: var(--dp-text-dim);
}

/* list-style-position defaults to "outside", which anchors the
   marker (•, 1., 2., ...) to the block's own left edge — independent
   of text-align. In a right-aligned .dp-prose (e.g. an About/Social
   member row that's flipped to the right side), that left the number
   sitting at the far left while its text sat at the far right, with
   nothing visually connecting them. "inside" keeps the marker glued
   to its own item's text no matter which way the block is aligned. */
.dp-prose ol,
.dp-prose ul {
  list-style-position: inside;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.dp-navbar {
  background: rgba(8, 8, 17, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: none;
  box-shadow: 0 4px 40px rgba(255, 45, 120, 0.08);
  position: relative;
}

.dp-navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink-strong);
  clip-path: polygon(
    0% 0%, 3% 100%, 8% 0%, 15% 80%, 22% 0%, 28% 100%, 35% 20%,
    42% 100%, 48% 0%, 55% 90%, 60% 10%, 68% 100%, 72% 0%,
    78% 80%, 85% 0%, 90% 100%, 95% 20%, 100% 100%, 100% 0%
  );
}

.dp-navbar .navbar-brand {
  font-family: var(--dp-font-display);
  font-size: 1.6rem;
  letter-spacing: 3px;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink-strong);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-style: italic;
}

.dp-navbar .navbar-brand img {
  height: 34px;
  width: auto;
}

.dp-navbar .nav-link {
  font-family: var(--dp-font-display);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dp-text-dim);
  padding: 0.5rem 0.9rem !important;
  transition: color 0.2s, text-shadow 0.2s;
}

.dp-navbar .nav-link:hover,
.dp-navbar .nav-link:focus,
.dp-navbar .nav-link.active {
  color: var(--dp-text);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.dp-navbar .dropdown-menu {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-pink-border);
  border-radius: 8px 3px 10px 5px;
  box-shadow: 0 8px 30px rgba(255, 45, 120, 0.1);
  transform: rotate(0.3deg);
}

.dp-navbar .dropdown-item {
  color: var(--dp-text-dim);
  font-size: 0.92rem;
  padding: 0.55rem 1rem;
}

.dp-navbar .dropdown-item:hover,
.dp-navbar .dropdown-item:focus {
  background: var(--dp-pink-soft);
  color: var(--dp-pink);
}

.dp-navbar .navbar-toggler {
  border-color: var(--dp-pink-border);
}

.dp-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(0.7);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-dp-gold {
  background: transparent;
  color: var(--dp-cyan);
  border: 2px solid var(--dp-cyan);
  border-radius: 12px 4px 14px 6px;
  font-family: var(--dp-font-display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.6rem calc(1.5rem - 1.5px) 0.6rem 1.5rem;
  box-shadow: var(--dp-glow-cyan), inset 0 0 20px rgba(0, 229, 255, 0.06);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  transform: rotate(-0.5deg);
}

.btn-dp-gold:hover {
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 30px rgba(0, 229, 255, 0.1);
}

.btn-dp-outline {
  background: transparent;
  color: var(--dp-cyan);
  border: 2px solid var(--dp-cyan);
  border-radius: 14px 5px 10px 3px;
  font-family: var(--dp-font-display);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.8rem calc(2rem - 2px) 0.8rem 2rem;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 30px rgba(0, 229, 255, 0.1);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  transform: rotate(-0.8deg);
}

.btn-dp-outline:hover {
  background: rgba(0, 229, 255, 0.15);
  color: #fff;
  box-shadow: var(--dp-glow-cyan-strong), inset 0 0 35px rgba(0, 229, 255, 0.12);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.dp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: none;
  box-shadow: 0 2px 40px rgba(255, 45, 120, 0.15);
  background:
    url("../img/hero-bg.b4926b1567a3.svg") center/cover no-repeat,
    linear-gradient(160deg, #080812 0%, #0a0616 30%, #120820 60%, #0c0618 100%);
}

/* Scan lines overlay */
.dp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.25) 1px,
      rgba(0, 0, 0, 0.25) 3px
    );
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

/* Strong neon floor reflection */
.dp-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background:
    linear-gradient(
      to top,
      rgba(0, 229, 255, 0.22) 0%,
      rgba(255, 45, 120, 0.14) 15%,
      rgba(0, 229, 255, 0.10) 35%,
      rgba(255, 45, 120, 0.04) 55%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

.dp-hero > .container {
  position: relative;
  z-index: 3;
}

/* Glitch heading effect */
.dp-hero h1 {
  text-shadow:
    0 0 40px rgba(255, 45, 120, 0.6),
    0 0 80px rgba(255, 45, 120, 0.3),
    0 0 150px rgba(255, 45, 120, 0.15),
    3px 0 rgba(0, 229, 255, 0.25),
    -2px 0 rgba(255, 45, 120, 0.15);
  animation: dp-glitch-text 5s ease-in-out infinite;
}

@keyframes dp-glitch-text {
  0%, 88%, 100% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 3px 0 rgba(0,229,255,0.2), -2px 0 rgba(255,45,120,0.15); transform: translateX(0); }
  89% { text-shadow: 0 0 50px rgba(255,45,120,0.6), 0 0 80px rgba(255,45,120,0.3), -6px 2px rgba(0,229,255,0.4), 4px -1px rgba(255,45,120,0.35); transform: translateX(-2px); }
  90% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 5px -1px rgba(0,229,255,0.35), -3px 1px rgba(255,45,120,0.3); transform: translateX(3px); }
  91% { text-shadow: 0 0 60px rgba(255,45,120,0.7), 0 0 120px rgba(255,45,120,0.3), -8px 3px rgba(0,229,255,0.5), 6px -2px rgba(255,45,120,0.4); transform: translateX(-1px); }
  92% { text-shadow: 0 0 40px rgba(255,45,120,0.5), 0 0 80px rgba(255,45,120,0.2), 2px 0 rgba(0,229,255,0.15), -1px 0 rgba(255,45,120,0.1); transform: translateX(0); }
}

.dp-hero-mascot {
  max-height: 70vh;
  width: auto;
  filter:
    drop-shadow(0 0 25px rgba(255, 45, 120, 0.6))
    drop-shadow(0 0 60px rgba(255, 45, 120, 0.35))
    drop-shadow(0 0 50px rgba(0, 229, 255, 0.35))
    drop-shadow(0 0 100px rgba(0, 229, 255, 0.15));
  animation: dp-mascot-glow 3s ease-in-out infinite alternate;
}

@keyframes dp-mascot-glow {
  0% {
    filter: drop-shadow(0 0 25px rgba(255,45,120,0.6)) drop-shadow(0 0 60px rgba(255,45,120,0.35)) drop-shadow(0 0 50px rgba(0,229,255,0.35)) drop-shadow(0 0 100px rgba(0,229,255,0.15));
  }
  100% {
    filter: drop-shadow(0 0 35px rgba(255,45,120,0.7)) drop-shadow(0 0 80px rgba(255,45,120,0.4)) drop-shadow(0 0 65px rgba(0,229,255,0.45)) drop-shadow(0 0 120px rgba(0,229,255,0.2));
  }
}

@media (max-width: 991.98px) {
  .dp-hero-mascot {
    max-height: 50vh;
    max-width: 280px;
  }
  .dp-navbar .dropdown-menu {
    transform: none;
  }
}

/* Decorative glitch X near mascot */
.dp-hero-glitch-x {
  position: absolute;
  top: 8%;
  right: 3%;
  width: 60px;
  height: 60px;
  z-index: 4;
  animation: dp-x-flicker 4s ease-in-out infinite;
}

.dp-hero-glitch-x::before,
.dp-hero-glitch-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 6px;
  background: var(--dp-pink);
  border-radius: 1px;
  box-shadow: var(--dp-glow-pink-strong), 0 0 15px rgba(255, 45, 120, 0.5);
}

.dp-hero-glitch-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.dp-hero-glitch-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes dp-x-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.3; }
  97% { opacity: 0.9; }
  98% { opacity: 0.2; }
  99% { opacity: 1; }
}

/* Glitch bars — horizontal neon lines in hero */
.dp-hero-glitch-bar {
  position: absolute;
  height: 3px;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  z-index: 4;
  pointer-events: none;
}

.dp-hero-glitch-bar:nth-child(1) { top: 12%; right: 0; width: 150px; opacity: 0.8; }
.dp-hero-glitch-bar:nth-child(2) { top: 15%; right: 5%; width: 250px; opacity: 0.5; background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan-strong); height: 2px; }
.dp-hero-glitch-bar:nth-child(3) { bottom: 25%; left: 0; width: 100px; opacity: 0.6; background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }

/* Primary CTA — pink neon with shimmer */
.btn-dp-gold-cta {
  background: transparent;
  color: var(--dp-pink);
  border: 2px solid var(--dp-pink);
  border-radius: 14px 5px 10px 3px;
  font-family: var(--dp-font-display);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.8rem calc(2rem - 2px) 0.8rem 2rem;
  box-shadow: var(--dp-glow-pink-strong), inset 0 0 30px rgba(255, 45, 120, 0.1);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.8deg);
}

.btn-dp-gold-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 45, 120, 0.18) 45%,
    rgba(255, 45, 120, 0.35) 50%,
    rgba(255, 45, 120, 0.18) 55%,
    transparent 60%
  );
  animation: dp-shimmer 3.5s ease-in-out infinite;
}

@keyframes dp-shimmer {
  0%, 100% { left: -75%; }
  50% { left: 125%; }
}

.btn-dp-gold-cta:hover {
  background: rgba(255, 45, 120, 0.15);
  color: #fff;
  box-shadow: var(--dp-glow-pink-strong), inset 0 0 35px rgba(255, 45, 120, 0.12);
}

.btn-dp-gold-cta:hover::after {
  animation: none;
  opacity: 0;
}

/* Stat row */
.dp-stat {
  border-right: 1px solid var(--dp-line);
  padding-right: 1.5rem;
}

.dp-stat:last-child {
  border-right: none;
}

.dp-stat-icon {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  display: block;
}

.dp-stat .dp-stat-number {
  font-family: var(--dp-font-display);
  font-size: 2.2rem;
  color: var(--dp-cyan);
  text-shadow: var(--dp-glow-cyan);
  line-height: 1;
}

.dp-stat .dp-stat-label {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.dp-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 10px 3px 8px 5px;
  padding: 1.5rem;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.dp-card:hover {
  border-color: var(--dp-cyan-border);
  transform: translateY(-3px) rotate(0.3deg);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
}

.dp-card .dp-card-icon {
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  display: block;
}

.dp-card .dp-card-title {
  font-family: var(--dp-font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--dp-cyan);
  margin-bottom: 0.4rem;
}

.dp-card .dp-card-text {
  font-size: 0.9rem;
  color: var(--dp-text-dim);
}

/* Content card (news/competition/bonus listing) with cover image */
.dp-content-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 5px 12px 4px 10px;
  overflow: hidden;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.dp-content-card:hover {
  border-color: var(--dp-pink-border);
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 4px 25px rgba(255, 45, 120, 0.1);
}

.dp-content-card .dp-content-card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--dp-ink-3);
}

.dp-content-card .dp-content-card-img-square {
  aspect-ratio: 1 / 1;
}

.dp-content-card .dp-content-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dp-content-card .dp-content-card-title {
  font-family: var(--dp-font-display);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: var(--dp-text);
  margin-bottom: 0.5rem;
}

.dp-content-card:hover .dp-content-card-title {
  color: var(--dp-pink);
}

.dp-content-card .dp-content-card-text {
  font-size: 0.88rem;
  color: var(--dp-text-dim);
  flex: 1;
}

.dp-badge {
  display: inline-block;
  font-family: var(--dp-font-display);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 8px 3px 6px 4px;
  background: var(--dp-cyan-soft);
  border: 1px solid var(--dp-cyan-border);
  color: var(--dp-cyan);
}

.dp-badge-pink {
  background: var(--dp-pink-soft);
  border-color: var(--dp-pink-border);
  color: var(--dp-pink);
}

.dp-badge-muted {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dp-line);
  color: var(--dp-text-dim);
}

/* ==========================================================================
   StreamField block spacing
   ========================================================================== */

.dp-streamfield-block {
  margin-bottom: 20px;
}

.dp-streamfield-block:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Video embed
   ========================================================================== */

.dp-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: var(--dp-ink-3);
}

.dp-video-embed iframe,
.dp-video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.dp-social-card {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  border-radius: 10px 3px 8px 5px;
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.dp-social-card:hover {
  transform: translateY(-3px) rotate(-0.3deg);
}

.dp-social-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dp-social-card-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 16px 5px 12px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dp-ink-3);
}

.dp-social-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-social-card-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  stroke: #fff;
}

.dp-social-card-title {
  margin: 0;
  font-size: 1.4rem;
}

.dp-social-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dp-social-card-list :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bullet-style marker on every line, whether the editor actually used
   a <ul> or just typed each line as its own paragraph — both are
   common ways to enter this in the rich text field, and should look
   the same. */
.dp-social-card-list :where(li, p) {
  padding-left: 1.5rem;
  position: relative;
  margin: 0;
}

.dp-social-card-list :where(li, p)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dp-social-card-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 8px 3px 6px 3px;
  border: 1px solid;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dp-social-card-btn:hover {
  transform: translateY(-2px);
}

.dp-social-card-pink { border-color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-social-card-cyan { border-color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-social-card-gold { border-color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-social-card-purple { border-color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-social-card-green { border-color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-social-card-red { border-color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-social-card-orange { border-color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-social-card-yellow { border-color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-social-card-lime { border-color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-social-card-teal { border-color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-social-card-blue { border-color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-social-card-indigo { border-color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-social-card-magenta { border-color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-social-card-rose { border-color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-social-card-white { border-color: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-social-card-icon-pink { background: var(--dp-pink); }
.dp-social-card-icon-cyan { background: var(--dp-cyan); }
.dp-social-card-icon-gold { background: var(--dp-gold); }
.dp-social-card-icon-purple { background: var(--dp-purple); }
.dp-social-card-icon-green { background: var(--dp-green); }
.dp-social-card-icon-red { background: var(--dp-red); }
.dp-social-card-icon-orange { background: var(--dp-orange); }
.dp-social-card-icon-yellow { background: var(--dp-yellow); }
.dp-social-card-icon-lime { background: var(--dp-lime); }
.dp-social-card-icon-teal { background: var(--dp-teal); }
.dp-social-card-icon-blue { background: var(--dp-blue); }
.dp-social-card-icon-indigo { background: var(--dp-indigo); }
.dp-social-card-icon-magenta { background: var(--dp-magenta); }
.dp-social-card-icon-rose { background: var(--dp-rose); }
.dp-social-card-icon-white { background: var(--dp-white); }

.dp-social-card-list-pink :where(li, p)::before { background: var(--dp-pink); }
.dp-social-card-list-cyan :where(li, p)::before { background: var(--dp-cyan); }
.dp-social-card-list-gold :where(li, p)::before { background: var(--dp-gold); }
.dp-social-card-list-purple :where(li, p)::before { background: var(--dp-purple); }
.dp-social-card-list-green :where(li, p)::before { background: var(--dp-green); }
.dp-social-card-list-red :where(li, p)::before { background: var(--dp-red); }
.dp-social-card-list-orange :where(li, p)::before { background: var(--dp-orange); }
.dp-social-card-list-yellow :where(li, p)::before { background: var(--dp-yellow); }
.dp-social-card-list-lime :where(li, p)::before { background: var(--dp-lime); }
.dp-social-card-list-teal :where(li, p)::before { background: var(--dp-teal); }
.dp-social-card-list-blue :where(li, p)::before { background: var(--dp-blue); }
.dp-social-card-list-indigo :where(li, p)::before { background: var(--dp-indigo); }
.dp-social-card-list-magenta :where(li, p)::before { background: var(--dp-magenta); }
.dp-social-card-list-rose :where(li, p)::before { background: var(--dp-rose); }
.dp-social-card-list-white :where(li, p)::before { background: var(--dp-white); }

.dp-social-card-btn-pink, .dp-social-card-btn-pink:hover { border-color: var(--dp-pink); color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-social-card-btn-cyan, .dp-social-card-btn-cyan:hover { border-color: var(--dp-cyan); color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-social-card-btn-gold, .dp-social-card-btn-gold:hover { border-color: var(--dp-gold); color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-social-card-btn-purple, .dp-social-card-btn-purple:hover { border-color: var(--dp-purple); color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-social-card-btn-green, .dp-social-card-btn-green:hover { border-color: var(--dp-green); color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-social-card-btn-red, .dp-social-card-btn-red:hover { border-color: var(--dp-red); color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-social-card-btn-orange, .dp-social-card-btn-orange:hover { border-color: var(--dp-orange); color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-social-card-btn-yellow, .dp-social-card-btn-yellow:hover { border-color: var(--dp-yellow); color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-social-card-btn-lime, .dp-social-card-btn-lime:hover { border-color: var(--dp-lime); color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-social-card-btn-teal, .dp-social-card-btn-teal:hover { border-color: var(--dp-teal); color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-social-card-btn-blue, .dp-social-card-btn-blue:hover { border-color: var(--dp-blue); color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-social-card-btn-indigo, .dp-social-card-btn-indigo:hover { border-color: var(--dp-indigo); color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-social-card-btn-magenta, .dp-social-card-btn-magenta:hover { border-color: var(--dp-magenta); color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-social-card-btn-rose, .dp-social-card-btn-rose:hover { border-color: var(--dp-rose); color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-social-card-btn-white, .dp-social-card-btn-white:hover { border-color: var(--dp-white); color: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-member-photo {
  max-width: 320px;
  width: 100%;
  height: auto;
}

.dp-member-photo-placeholder {
  width: 320px;
  height: 320px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border-radius: 50%;
  background: var(--dp-ink-3);
  border: 1px solid var(--dp-line);
}

/* ==========================================================================
   Schedule table
   ========================================================================== */

.dp-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dp-text);
  --bs-table-border-color: var(--dp-line);
}

.dp-table thead th {
  font-family: var(--dp-font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--dp-cyan);
  border-bottom: 2px solid var(--dp-cyan-border);
}

.dp-table tbody tr:hover,
.dp-table tbody tr.dp-schedule-row-hover {
  --bs-table-bg: rgba(255, 45, 120, 0.05);
}

.dp-schedule-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.dp-schedule-dot-pink { background: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-schedule-dot-cyan { background: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-schedule-dot-gold { background: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-schedule-dot-purple { background: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-schedule-dot-green { background: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-schedule-dot-red { background: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-schedule-dot-orange { background: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-schedule-dot-yellow { background: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-schedule-dot-lime { background: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-schedule-dot-teal { background: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-schedule-dot-blue { background: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-schedule-dot-indigo { background: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-schedule-dot-magenta { background: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-schedule-dot-rose { background: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-schedule-dot-white { background: var(--dp-white); box-shadow: var(--dp-glow-white); }

.dp-schedule-name-pink { color: var(--dp-pink); }
.dp-schedule-name-cyan { color: var(--dp-cyan); }
.dp-schedule-name-gold { color: var(--dp-gold); }
.dp-schedule-name-purple { color: var(--dp-purple); }
.dp-schedule-name-green { color: var(--dp-green); }
.dp-schedule-name-red { color: var(--dp-red); }
.dp-schedule-name-orange { color: var(--dp-orange); }
.dp-schedule-name-yellow { color: var(--dp-yellow); }
.dp-schedule-name-lime { color: var(--dp-lime); }
.dp-schedule-name-teal { color: var(--dp-teal); }
.dp-schedule-name-blue { color: var(--dp-blue); }
.dp-schedule-name-indigo { color: var(--dp-indigo); }
.dp-schedule-name-magenta { color: var(--dp-magenta); }
.dp-schedule-name-rose { color: var(--dp-rose); }
.dp-schedule-name-white { color: var(--dp-white); }

/* "Sledovat" button on the schedule table, recolored to match the
   streamer's own color instead of the default cyan btn-dp-outline. */
.dp-schedule-btn-pink, .dp-schedule-btn-pink:hover { border-color: var(--dp-pink); color: var(--dp-pink); box-shadow: var(--dp-glow-pink); }
.dp-schedule-btn-cyan, .dp-schedule-btn-cyan:hover { border-color: var(--dp-cyan); color: var(--dp-cyan); box-shadow: var(--dp-glow-cyan); }
.dp-schedule-btn-gold, .dp-schedule-btn-gold:hover { border-color: var(--dp-gold); color: var(--dp-gold); box-shadow: var(--dp-glow-gold); }
.dp-schedule-btn-purple, .dp-schedule-btn-purple:hover { border-color: var(--dp-purple); color: var(--dp-purple); box-shadow: var(--dp-glow-purple); }
.dp-schedule-btn-green, .dp-schedule-btn-green:hover { border-color: var(--dp-green); color: var(--dp-green); box-shadow: var(--dp-glow-green); }
.dp-schedule-btn-red, .dp-schedule-btn-red:hover { border-color: var(--dp-red); color: var(--dp-red); box-shadow: var(--dp-glow-red); }
.dp-schedule-btn-orange, .dp-schedule-btn-orange:hover { border-color: var(--dp-orange); color: var(--dp-orange); box-shadow: var(--dp-glow-orange); }
.dp-schedule-btn-yellow, .dp-schedule-btn-yellow:hover { border-color: var(--dp-yellow); color: var(--dp-yellow); box-shadow: var(--dp-glow-yellow); }
.dp-schedule-btn-lime, .dp-schedule-btn-lime:hover { border-color: var(--dp-lime); color: var(--dp-lime); box-shadow: var(--dp-glow-lime); }
.dp-schedule-btn-teal, .dp-schedule-btn-teal:hover { border-color: var(--dp-teal); color: var(--dp-teal); box-shadow: var(--dp-glow-teal); }
.dp-schedule-btn-blue, .dp-schedule-btn-blue:hover { border-color: var(--dp-blue); color: var(--dp-blue); box-shadow: var(--dp-glow-blue); }
.dp-schedule-btn-indigo, .dp-schedule-btn-indigo:hover { border-color: var(--dp-indigo); color: var(--dp-indigo); box-shadow: var(--dp-glow-indigo); }
.dp-schedule-btn-magenta, .dp-schedule-btn-magenta:hover { border-color: var(--dp-magenta); color: var(--dp-magenta); box-shadow: var(--dp-glow-magenta); }
.dp-schedule-btn-rose, .dp-schedule-btn-rose:hover { border-color: var(--dp-rose); color: var(--dp-rose); box-shadow: var(--dp-glow-rose); }
.dp-schedule-btn-white, .dp-schedule-btn-white:hover { border-color: var(--dp-white); color: var(--dp-white); box-shadow: var(--dp-glow-white); }

/* ==========================================================================
   Sections / dividers
   ========================================================================== */

.dp-section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.dp-section-head {
  border-bottom: none;
  position: relative;
  padding: 20px 30px 1rem;
  margin-bottom: 2rem;
}

.dp-section-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dp-pink), var(--dp-cyan), var(--dp-pink));
  box-shadow: var(--dp-glow-pink);
  clip-path: polygon(
    0% 50%, 4% 0%, 8% 100%, 13% 0%, 18% 100%, 24% 20%, 30% 100%,
    35% 0%, 40% 80%, 46% 0%, 52% 100%, 58% 30%, 64% 100%,
    70% 0%, 76% 100%, 82% 0%, 87% 70%, 92% 0%, 96% 100%, 100% 50%
  );
}

.dp-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dp-pink), var(--dp-cyan), var(--dp-pink), transparent);
  box-shadow: var(--dp-glow-pink), var(--dp-glow-cyan);
  border: none;
  margin: 0;
  clip-path: polygon(
    0% 50%, 2% 0%, 6% 100%, 10% 0%, 14% 100%, 20% 30%, 25% 100%,
    30% 0%, 36% 100%, 40% 0%, 45% 80%, 50% 0%, 55% 100%, 60% 20%,
    65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 70%, 90% 0%, 94% 100%,
    98% 0%, 100% 50%
  );
}

/* Community CTA section */
.dp-community-cta {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 45, 120, 0.06) 0%, transparent 60%),
    var(--dp-ink-2);
  border-top: none;
  border-bottom: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.dp-footer {
  background: var(--dp-ink);
  border-top: none;
  padding: 2.5rem 0 1.5rem;
  margin-top: auto;
  position: relative;
}

.dp-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dp-pink), var(--dp-cyan), transparent);
  box-shadow: var(--dp-glow-pink);
  clip-path: polygon(
    0% 50%, 5% 0%, 10% 100%, 16% 0%, 22% 100%, 28% 20%, 34% 100%,
    40% 0%, 47% 80%, 53% 0%, 58% 100%, 64% 30%, 70% 100%,
    76% 0%, 82% 100%, 88% 0%, 93% 70%, 97% 0%, 100% 50%
  );
}

.dp-footer .dp-footer-brand {
  font-family: var(--dp-font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--dp-pink);
  text-shadow: var(--dp-glow-pink);
}

.dp-footer a {
  color: var(--dp-text-dim);
  font-size: 0.88rem;
}

.dp-footer-cols li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

@media (min-width: 992px) {
  .dp-footer-cols {
    column-count: 2;
    column-gap: 2rem;
  }
}

.dp-footer a:hover {
  color: var(--dp-cyan);
}

.dp-footer .dp-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--dp-line);
  border-radius: 50%;
  margin-right: 0.5rem;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.dp-footer .dp-social-icons a:hover {
  border-color: var(--dp-cyan);
  color: var(--dp-cyan);
  box-shadow: var(--dp-glow-cyan);
}

.dp-footer-disclaimer {
  font-size: 0.72rem;
  color: var(--dp-text-faint);
  border-top: 1px solid var(--dp-line);
  padding-top: 1rem;
  margin-top: 1.5rem;
  line-height: 1.6;
}

/* ==========================================================================
   Forms (contact page)
   ========================================================================== */

.dp-form .form-control,
.dp-form .form-select {
  background: var(--dp-ink-2);
  border: 1px solid var(--dp-line);
  color: var(--dp-text);
  border-radius: 0;
}

.dp-form .form-control:focus,
.dp-form .form-select:focus {
  background: var(--dp-ink-2);
  border-color: var(--dp-cyan);
  color: var(--dp-text);
  box-shadow: 0 0 0 0.2rem var(--dp-cyan-soft);
}

.dp-form .form-label {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dp-form .form-control::placeholder {
  color: var(--dp-text-faint);
}

/* ==========================================================================
   Age/cookie/terms gate
   ========================================================================== */

.dp-gate-check {
  border: 2px solid var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
}

.dp-gate-check:checked {
  background-color: var(--dp-green);
  border-color: var(--dp-green);
  box-shadow: var(--dp-glow-green);
}

.dp-gate-check:focus {
  border-color: var(--dp-pink);
  box-shadow: 0 0 0 0.2rem var(--dp-pink-soft);
}

.dp-gate-check:checked:focus {
  border-color: var(--dp-green);
  box-shadow: 0 0 0 0.2rem rgba(57, 255, 136, 0.25);
}

/* ==========================================================================
   Status pills (live now)
   ========================================================================== */

.dp-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dp-pink);
  box-shadow: var(--dp-glow-pink);
  animation: dp-pulse 2s infinite;
}

@keyframes dp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */

@media (max-width: 767.98px) {
  .dp-stat {
    border-right: none;
    padding-right: 0;
  }
}