:root {
  --ink: #f8e5ca;
  --muted: #caa789;
  --line: #9b5b33;
  --line-hi: #e0a260;
  --red: #7a2435;
  --red-deep: #321016;
  --panel: rgba(12, 11, 14, .92);
  --panel-soft: rgba(18, 13, 17, .86);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(rgba(4,4,7,.48), rgba(8,5,9,.68)),
    url("assets/shrine_bg.png") center top / cover no-repeat,
    #070609;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 37, 53, .16), transparent 34%),
    radial-gradient(circle at center, transparent 0 45%, rgba(0,0,0,.35) 100%);
  z-index: -2;
}

.ambient-petals { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal {
  position: absolute;
  top: -5vh;
  width: 9px;
  height: 6px;
  border-radius: 80% 20% 70% 30%;
  background: linear-gradient(135deg, #f4a8b1, #842f44);
  opacity: .34;
  animation: petalFall linear infinite;
}
@keyframes petalFall { to { transform: translate3d(90px, 112vh, 0) rotate(500deg); } }

.site-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 16px auto 38px;
  padding: 0 18px 18px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(211,146,89,.80);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8,8,10,.72), rgba(10,8,11,.82));
  box-shadow: 0 22px 55px rgba(0,0,0,.45), inset 0 0 0 1px rgba(112,35,48,.32);
  overflow: hidden;
}


.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 8% 24%, rgba(228,126,142,.08), transparent 18%),
    radial-gradient(circle at 92% 48%, rgba(228,126,142,.07), transparent 20%),
    radial-gradient(circle at 16% 72%, rgba(224,162,96,.05), transparent 20%),
    repeating-linear-gradient(135deg, transparent 0 58px, rgba(255,255,255,.010) 59px 60px);
}

.utility-bar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 12px;
  left: 18px;
  right: 18px;
  z-index: 20;
}

.share-btn,
.lang-switch button,
.adult-enter,
.adult-reset { font: inherit; }

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(211,146,89,.75);
  background: rgba(7,7,9,.72);
  color: var(--ink);
  cursor: pointer;
}
.share-btn:hover { background: rgba(86,31,43,.78); }

.lang-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(211,146,89,.72);
  background: rgba(7,7,9,.78);
  border-radius: 10px;
}
.lang-switch button {
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  color: #c8a486;
  background: transparent;
  cursor: pointer;
}
.lang-switch button.active {
  color: #ffe7ce;
  background: linear-gradient(180deg, #742c3a, #41131c);
  box-shadow: inset 0 0 0 1px rgba(237,177,120,.22);
}

.hero {
  min-height: 610px;
  margin: 0 -18px 8px;
  padding: 74px 30px 28px;
  position: relative;
  display: grid;
  grid-template-columns: 36% 44% 20%;
  align-items: end;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,5,8,.10), rgba(5,5,8,.38) 38%, rgba(5,5,8,.48) 64%, rgba(5,5,8,.14)),
    linear-gradient(180deg, rgba(6,5,8,.02), rgba(6,5,8,.28) 65%, rgba(6,5,8,.72)),
    url("assets/shrine_bg.png") center 44% / cover no-repeat;
  border-bottom: 1px solid rgba(211,146,89,.42);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 51% 38%, transparent 0 31%, rgba(0,0,0,.13) 67%, rgba(0,0,0,.32) 100%);
}

.hero-graefin,
.hero-nari,
.hero-center { position: relative; z-index: 2; }

.hero-graefin {
  width: min(100%, 500px);
  max-height: 545px;
  object-fit: contain;
  object-position: left bottom;
  justify-self: start;
  align-self: end;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.44));
}

.hero-nari {
  width: min(100%, 220px);
  object-fit: contain;
  justify-self: center;
  align-self: end;
  margin-bottom: 42px;
  filter: drop-shadow(0 15px 22px rgba(0,0,0,.34));
}

.hero-center {
  text-align: center;
  padding: 0 14px 78px;
  align-self: center;
}

.hero-rose { color: #d26f71; letter-spacing: .45em; margin-bottom: 10px; }
h1, h2, .card-title, .hero-sub, .nari-card strong, footer p { font-family: Georgia, "Times New Roman", serif; }
h1 {
  margin: 0;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: .96;
  letter-spacing: -.03em;
  text-shadow: 0 3px 18px rgba(0,0,0,.78);
  white-space: nowrap;
}
.hero-sub { margin: 12px 0 18px; font-size: 21px; color: #e4c3a2; }
.hero-sub span { color: #bc5664; padding: 0 .4em; }
.hero-line { margin: 7px auto; max-width: 560px; font-family: Georgia, serif; font-style: italic; color: #efd2b3; font-size: 16px; line-height: 1.45; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.hero-line-small { color: #caa98c; font-size: 14px; }
.nari-card {
  width: max-content;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid rgba(211,146,89,.74);
  border-radius: 10px;
  background: rgba(6,6,8,.80);
  box-shadow: inset 0 0 0 1px rgba(113,33,46,.26), 0 7px 18px rgba(0,0,0,.18);
}
.nari-card .paw { font-size: 17px; }
.nari-card strong { color: #f0b3a4; font-size: 21px; }
.nari-card small { color: #c7a587; font-size: 15px; line-height: 1.25; }

.content-section {
  padding: 16px 5% 12px;
  position: relative;
  margin-top: 8px;
}
.content-section::before {
  content: "";
  position: absolute;
  inset: 4px 2.5% 4px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 22%, rgba(224, 108, 130, .085), transparent 18%),
    radial-gradient(circle at 90% 24%, rgba(224, 162, 96, .06), transparent 18%),
    radial-gradient(circle at 18% 78%, rgba(209, 84, 110, .05), transparent 14%),
    linear-gradient(180deg, rgba(14,11,16,.58), rgba(10,8,11,.28));
  border: 1px solid rgba(211,146,89,.12);
  box-shadow: inset 0 0 24px rgba(120, 38, 52, .12), 0 10px 34px rgba(0,0,0,.10);
  pointer-events: none;
  z-index: -2;
}
.content-section::after {
  content: "✦   ❀   ✦";
  position: absolute;
  top: 10px;
  right: calc(2.5% + 18px);
  color: rgba(210, 111, 113, .28);
  letter-spacing: .35em;
  font-size: 14px;
  pointer-events: none;
  z-index: -1;
}
h2 {
  margin: 6px 0 12px;
  text-align: center;
  color: #dfad7d;
  font-size: 28px;
  font-weight: 600;
}
h2::before, h2::after { content: " ✦ "; color: #9e4050; font-size: .55em; vertical-align: middle; }

.cards { display: grid; gap: 11px; position: relative; z-index: 1; }
.two-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
.social-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.social-grid .centered { grid-column: 1 / -1; width: 50%; justify-self: center; }

.link-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 50%, rgba(151, 34, 59, .20), transparent 22%),
    radial-gradient(circle at 90% 50%, rgba(221, 150, 88, .08), transparent 18%),
    linear-gradient(180deg, rgba(23,19,24,.97), rgba(10,10,12,.988));
  border: 1px solid rgba(211,146,89,.80);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(76, 23, 35, .35),
    inset 0 0 0 1px rgba(242, 201, 156, .05),
    inset 0 0 28px rgba(255,255,255,.012),
    0 10px 24px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.link-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 11px;
  border: 1px solid rgba(227, 173, 117, .10);
  background:
    linear-gradient(90deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) top 12px left 18px / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) top 12px left 12px / 1px 18px no-repeat,
    linear-gradient(270deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) top 12px right 18px / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) top 12px right 12px / 1px 18px no-repeat,
    linear-gradient(90deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) bottom 12px left 18px / 34px 1px no-repeat,
    linear-gradient(0deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) bottom 12px left 12px / 1px 18px no-repeat,
    linear-gradient(270deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) bottom 12px right 18px / 34px 1px no-repeat,
    linear-gradient(0deg, rgba(233,191,146,.85), rgba(233,191,146,.12)) bottom 12px right 12px / 1px 18px no-repeat;
  pointer-events: none;
}
.link-card::after {
  content: "";
  position: absolute;
  inset: auto auto -24px -22px;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(171, 54, 77, .20) 0%, rgba(171, 54, 77, .08) 28%, transparent 72%);
  opacity: .72;
  pointer-events: none;
  transition: transform .24s ease, opacity .24s ease;
}
.link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(244,186,127,.96);
  background:
    radial-gradient(circle at 12% 50%, rgba(164, 41, 67, .25), transparent 23%),
    radial-gradient(circle at 88% 48%, rgba(221, 150, 88, .12), transparent 20%),
    linear-gradient(180deg, rgba(33,24,31,.986), rgba(13,10,14,.99));
  box-shadow:
    0 0 0 1px rgba(109, 31, 47, .42),
    0 12px 28px rgba(0,0,0,.28),
    0 0 18px rgba(155, 63, 78, .16),
    inset 0 0 0 1px rgba(242, 201, 156, .07),
    inset 0 0 22px rgba(255,255,255,.025);
}
.link-card:hover::after {
  transform: translate(10px, -8px);
  opacity: .95;
}
.link-card:hover .frame-corner,
.link-card:hover .frame-runic {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 193, 130, .15));
}
.frame-corner,
.frame-runic {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.frame-corner {
  width: 19px;
  height: 19px;
  opacity: .9;
}
.frame-corner::before,
.frame-corner::after {
  content: "";
  position: absolute;
}
.frame-corner::before {
  width: 100%;
  height: 100%;
  border-color: rgba(236, 188, 137, .62);
}
.frame-corner::after {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,235,210,.95), rgba(231,166,107,.82));
  box-shadow: 0 0 8px rgba(238, 165, 106, .22);
}
.frame-corner.tl { top: 7px; left: 7px; }
.frame-corner.tl::before { border-top: 1px solid rgba(236, 188, 137, .62); border-left: 1px solid rgba(236, 188, 137, .62); border-top-left-radius: 8px; }
.frame-corner.tl::after { right: -1px; bottom: -1px; }
.frame-corner.tr { top: 7px; right: 7px; }
.frame-corner.tr::before { border-top: 1px solid rgba(236, 188, 137, .62); border-right: 1px solid rgba(236, 188, 137, .62); border-top-right-radius: 8px; }
.frame-corner.tr::after { left: -1px; bottom: -1px; }
.frame-corner.bl { bottom: 7px; left: 7px; }
.frame-corner.bl::before { border-bottom: 1px solid rgba(236, 188, 137, .62); border-left: 1px solid rgba(236, 188, 137, .62); border-bottom-left-radius: 8px; }
.frame-corner.bl::after { right: -1px; top: -1px; }
.frame-corner.br { bottom: 7px; right: 7px; }
.frame-corner.br::before { border-bottom: 1px solid rgba(236, 188, 137, .62); border-right: 1px solid rgba(236, 188, 137, .62); border-bottom-right-radius: 8px; }
.frame-corner.br::after { left: -1px; top: -1px; }
.frame-runic {
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 10px;
  opacity: .92;
  background:
    radial-gradient(circle, rgba(255,236,219,.95) 0 1.6px, transparent 2px) center / 10px 10px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(236,188,137,.72) 20%, rgba(236,188,137,.18) 100%) left 0 top 50% / 22px 1px no-repeat,
    linear-gradient(270deg, transparent 0, rgba(236,188,137,.72) 20%, rgba(236,188,137,.18) 100%) right 0 top 50% / 22px 1px no-repeat;
}
.link-card:focus-visible,
.footer-link:focus-visible,
.share-btn:focus-visible,
.lang-switch button:focus-visible,
.adult-enter:focus-visible,
.adult-reset:focus-visible { outline: 2px solid #e3ad75; outline-offset: 3px; }

.icon-tile {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.icon-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.35));
}

.card-title { display:block; font-size: 20px; line-height: 1.05; }
.card-subtitle { display:block; margin-top:4px; color:var(--muted); font-size:13px; }
.chevron { justify-self:end; color:#e4b17d; font-size:22px; }

.community-wrap .link-card { width: 72%; margin: 0 auto; }


.support-section > h2 {
  width: calc(100% - 205px);
  margin: 4px auto 8px 0;
}
.support-row {
  display: grid;
  grid-template-columns: 1fr 185px;
  gap: 16px;
  align-items: start;
  margin-top: 2px;
}
.support-cards { align-self: start; }
.sleeping-nari-box {
  min-height: 105px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.sleeping-nari-box img {
  width: 175px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.38));
}

.adult-section {
  margin: 18px 5% 4px;
  padding: 18px 18px 16px;
  text-align: center;
  border: 1px solid rgba(211,146,89,.62);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% -10%, rgba(178,65,83,.25), transparent 44%),
    linear-gradient(180deg, rgba(76,22,31,.95), rgba(42,14,21,.98));
  position: relative;
  overflow: hidden;
}
.adult-section::before,
.adult-section::after {
  content: "✿ ✿ ✿";
  position: absolute;
  color: rgba(232,136,150,.32);
  font-size: 22px;
  letter-spacing: .15em;
}
.adult-section::before { left: 14px; bottom: 12px; transform: rotate(-18deg); }
.adult-section::after { right: 14px; top: 12px; transform: rotate(18deg); }
.adult-section p { margin: 4px auto; color: #e6c1b9; max-width: 700px; }
.adult-enter, .adult-reset {
  margin-top: 12px;
  padding: 11px 22px;
  border: 1px solid rgba(235,178,126,.62);
  border-radius: 8px;
  color: #ffe9d7;
  background: linear-gradient(180deg, #b15b69, #873143);
  cursor: pointer;
}
.adult-reset { background: rgba(0,0,0,.24); }
.adult-links { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.adult-links .link-card[aria-disabled="true"] { opacity: .78; }

footer {
  margin-top: 16px;
  padding-top: 12px;
  text-align: center;
  border-top: 1px solid rgba(211,146,89,.38);
}
.footer-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-link {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: transform .16s ease, filter .16s ease;
}
.footer-link:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.08);
}
.footer-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.35));
}
footer p { margin: 8px 0 0; color: #c7a383; font-size: 15px; }

@media (max-width: 960px) {
  .support-section > h2 { width: calc(100% - 176px); }
  .site-shell { width: min(790px, calc(100% - 20px)); }
  .hero { grid-template-columns: 34% 48% 18%; min-height: 520px; }
  .hero-graefin { max-height: 470px; }
  .hero-nari { width: 175px; margin-bottom: 34px; }
  .hero-center { padding: 0 8px 56px; }
  h1 { font-size: clamp(38px, 5.1vw, 58px); }
  .support-row { grid-template-columns: 1fr 160px; }
  .community-wrap .link-card { width: 80%; }
}

@media (max-width: 680px) {
  .support-section > h2 { width: 100%; }
  body {
    background:
      linear-gradient(rgba(4,4,7,.60), rgba(8,5,9,.76)),
      url("assets/shrine_bg.png") center top / auto 100vh no-repeat,
      #070609;
  }
  .site-shell { width: min(500px, calc(100% - 12px)); margin-top: 6px; padding: 0 10px 14px; border-radius: 18px; }
  .utility-bar { left: 10px; right: 10px; top: 8px; }
  .share-btn { display: none; }
  .hero {
    margin: 0 -10px 6px;
    min-height: auto;
    padding: 60px 12px 20px;
    display: grid;
    grid-template-columns: 1fr 120px;
    grid-template-areas:
      "graefin graefin"
      "center center"
      "nari nari";
    background-position: center top;
  }
  .hero-graefin {
    grid-area: graefin;
    width: min(78%, 330px);
    max-height: none;
    display: block;
    margin: 0 auto -8px;
    justify-self: center;
  }
  .hero-center { grid-area: center; padding: 0 4px 8px; }
  .hero-nari {
    grid-area: nari;
    width: 135px;
    margin: 4px auto 0;
    justify-self: center;
  }
  h1 { font-size: clamp(38px, 12vw, 54px); white-space: normal; }
  .hero-sub { font-size: 17px; margin-bottom: 12px; }
  .hero-line { font-size: 14px; }
  .hero-line-small { font-size: 13px; }
  .two-cols { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .social-grid .centered { width: 76%; }
  .community-wrap .link-card { width: 100%; }
  .support-row { grid-template-columns: 1fr; gap: 8px; }
  .sleeping-nari-box { min-height: 120px; }
  .sleeping-nari-box img { width: 160px; }
  .adult-links { grid-template-columns: 1fr; }
}

.icon-tile.twitch .glyph { font-size: 14px; letter-spacing: -.06em; }

.content-section > h2, .community-wrap, .support-row { position: relative; z-index: 1; }

.community-wrap .link-card, .support-cards .link-card { backdrop-filter: none; }

@media (max-width: 680px) {
  .content-section { padding: 14px 4% 10px; }
  .content-section::before { inset: 4px 1.5% 4px; }
  .content-section::after { right: calc(1.5% + 12px); font-size: 12px; letter-spacing: .25em; }
}


/* V16: Buttons intentionally without platform icons */
.card-copy { min-width: 0; padding-left: 10px; }
.icon-tile { display: none !important; }
.footer-links { gap: 8px; }
.footer-text-link {
  width: auto;
  height: auto;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  color: var(--muted);
  background: rgba(16,12,15,.72);
  border: 1px solid rgba(211,146,89,.42);
}
.footer-text-link:hover {
  color: var(--ink);
  border-color: rgba(244,186,127,.85);
  background: rgba(77,27,39,.46);
}


/* V17 refinements */
:root {
  --twitch-accent: rgba(145, 70, 255, .22);
  --youtube-accent: rgba(255, 56, 74, .22);
  --x-accent: rgba(178, 96, 120, .18);
  --instagram-accent: rgba(215, 88, 137, .22);
  --tiktok-accent: rgba(79, 220, 210, .14);
  --bluesky-accent: rgba(66, 146, 255, .22);
  --discord-accent: rgba(99, 114, 255, .22);
  --amazon-accent: rgba(255, 170, 40, .18);
  --donate-accent: rgba(227, 92, 126, .20);
  --fansly-accent: rgba(33, 170, 255, .18);
  --onlyfans-accent: rgba(0, 174, 239, .16);
}

.link-card {
  min-height: 80px;
  padding: 12px 18px;
}

.link-card::before {
  inset: 5px;
  border-radius: 12px;
  border: 1px solid rgba(227, 173, 117, .14);
  background:
    radial-gradient(circle at 50% 7px, rgba(255,228,205,.95) 0 1.8px, transparent 2.2px) top 0 center / 100% 14px no-repeat,
    linear-gradient(90deg, rgba(233,191,146,.95), rgba(233,191,146,.10)) top 14px left 22px / 34px 1px no-repeat,
    linear-gradient(270deg, rgba(233,191,146,.95), rgba(233,191,146,.10)) top 14px right 22px / 34px 1px no-repeat,
    linear-gradient(90deg, rgba(233,191,146,.80), rgba(233,191,146,.10)) bottom 14px left 22px / 34px 1px no-repeat,
    linear-gradient(270deg, rgba(233,191,146,.80), rgba(233,191,146,.10)) bottom 14px right 22px / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(233,191,146,.85), rgba(233,191,146,.10)) top 14px left 14px / 1px 18px no-repeat,
    linear-gradient(180deg, rgba(233,191,146,.85), rgba(233,191,146,.10)) top 14px right 14px / 1px 18px no-repeat,
    linear-gradient(0deg, rgba(233,191,146,.85), rgba(233,191,146,.10)) bottom 14px left 14px / 1px 18px no-repeat,
    linear-gradient(0deg, rgba(233,191,146,.85), rgba(233,191,146,.10)) bottom 14px right 14px / 1px 18px no-repeat,
    radial-gradient(circle at 10% 100%, rgba(215, 80, 110, .07), transparent 12%),
    radial-gradient(circle at 92% 0%, rgba(226, 169, 103, .06), transparent 10%);
}

.link-card::after {
  inset: auto -14px -20px auto;
  width: 138px;
  height: 138px;
  background:
    radial-gradient(circle at 35% 35%, rgba(171, 54, 77, .22) 0%, rgba(171, 54, 77, .08) 28%, transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(224, 162, 96, .12) 0%, transparent 62%);
}

.link-card .chevron {
  align-self: center;
  position: relative;
  z-index: 2;
}

.card-copy {
  min-width: 0;
  padding-left: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  min-height: 54px;
}
.card-title {
  line-height: 1.08;
}
.card-subtitle {
  margin-top: 6px;
  line-height: 1.2;
}

.link-card .frame-runic {
  width: 76px;
}

/* extra kitsune / succubus frame accents */
.link-card .frame-corner::before {
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
.link-card .frame-corner.tl,
.link-card .frame-corner.tr,
.link-card .frame-corner.bl,
.link-card .frame-corner.br {
  width: 22px;
  height: 22px;
}
.link-card .frame-corner.tl::after,
.link-card .frame-corner.tr::after,
.link-card .frame-corner.bl::after,
.link-card .frame-corner.br::after {
  width: 4px;
  height: 4px;
}
.link-card .frame-corner.tl { top: 8px; left: 8px; }
.link-card .frame-corner.tr { top: 8px; right: 8px; }
.link-card .frame-corner.bl { bottom: 8px; left: 8px; }
.link-card .frame-corner.br { bottom: 8px; right: 8px; }

.link-card.platform-twitch,
.link-card.platform-youtube,
.link-card.platform-xMain,
.link-card.platform-xCozy,
.link-card.platform-instagram,
.link-card.platform-tiktok,
.link-card.platform-bluesky,
.link-card.platform-discord,
.link-card.platform-amazon,
.link-card.platform-donate,
.link-card.platform-fansly,
.link-card.platform-onlyfans {
  background:
    radial-gradient(circle at 12% 50%, rgba(151, 34, 59, .16), transparent 22%),
    radial-gradient(circle at 88% 50%, rgba(221, 150, 88, .08), transparent 18%),
    linear-gradient(180deg, rgba(23,19,24,.97), rgba(10,10,12,.988));
}

.link-card.platform-twitch { --platform-accent: var(--twitch-accent); }
.link-card.platform-youtube { --platform-accent: var(--youtube-accent); }
.link-card.platform-xMain,
.link-card.platform-xCozy { --platform-accent: var(--x-accent); }
.link-card.platform-instagram { --platform-accent: var(--instagram-accent); }
.link-card.platform-tiktok { --platform-accent: var(--tiktok-accent); }
.link-card.platform-bluesky { --platform-accent: var(--bluesky-accent); }
.link-card.platform-discord { --platform-accent: var(--discord-accent); }
.link-card.platform-amazon { --platform-accent: var(--amazon-accent); }
.link-card.platform-donate { --platform-accent: var(--donate-accent); }
.link-card.platform-fansly { --platform-accent: var(--fansly-accent); }
.link-card.platform-onlyfans { --platform-accent: var(--onlyfans-accent); }

.link-card.platform-twitch,
.link-card.platform-youtube,
.link-card.platform-xMain,
.link-card.platform-xCozy,
.link-card.platform-instagram,
.link-card.platform-tiktok,
.link-card.platform-bluesky,
.link-card.platform-discord,
.link-card.platform-amazon,
.link-card.platform-donate,
.link-card.platform-fansly,
.link-card.platform-onlyfans {
  background:
    radial-gradient(circle at 12% 50%, var(--platform-accent), transparent 22%),
    radial-gradient(circle at 88% 50%, rgba(221, 150, 88, .08), transparent 18%),
    linear-gradient(180deg, rgba(23,19,24,.97), rgba(10,10,12,.988));
}

.link-card.platform-twitch:hover,
.link-card.platform-youtube:hover,
.link-card.platform-xMain:hover,
.link-card.platform-xCozy:hover,
.link-card.platform-instagram:hover,
.link-card.platform-tiktok:hover,
.link-card.platform-bluesky:hover,
.link-card.platform-discord:hover,
.link-card.platform-amazon:hover,
.link-card.platform-donate:hover,
.link-card.platform-fansly:hover,
.link-card.platform-onlyfans:hover {
  background:
    radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--platform-accent) 140%, rgba(255,255,255,.03)), transparent 24%),
    radial-gradient(circle at 88% 50%, rgba(233,181,126,.12), transparent 19%),
    linear-gradient(180deg, rgba(33,24,31,.986), rgba(13,10,14,.99));
}

/* subtle emblem-like decorations inside frames */
.link-card .card-title::before {
  content: '❦';
  display: inline-block;
  margin-right: 8px;
  font-size: .8em;
  color: rgba(228, 136, 150, .65);
}
.link-card.platform-twitch .card-title::before,
.link-card.platform-youtube .card-title::before,
.link-card.platform-fansly .card-title::before,
.link-card.platform-onlyfans .card-title::before { content: '♥'; }
.link-card.platform-discord .card-title::before,
.link-card.platform-bluesky .card-title::before { content: '✦'; }
.link-card.platform-amazon .card-title::before,
.link-card.platform-donate .card-title::before { content: '❀'; }

.community-wrap .link-card { width: 72%; }
.support-section > h2 {
  width: calc(100% - 205px);
  margin: 4px auto 4px 0;
}
.support-row { margin-top: 0; align-items: center; }
.support-cards { margin-top: 0; }

/* more succubus-heavy adult section */
.adult-section {
  border-radius: 16px;
  border: 1px solid rgba(223,115,135,.58);
  box-shadow: inset 0 0 0 1px rgba(244,186,127,.10), 0 18px 38px rgba(0,0,0,.18);
  background:
    radial-gradient(circle at 50% -6%, rgba(220, 72, 116, .28), transparent 40%),
    radial-gradient(circle at 12% 14%, rgba(92, 9, 27, .34), transparent 22%),
    radial-gradient(circle at 88% 16%, rgba(92, 9, 27, .34), transparent 22%),
    linear-gradient(180deg, rgba(95,20,40,.96), rgba(41,8,18,.985));
}
.adult-section::before,
.adult-section::after {
  color: rgba(240,130,158,.34);
  font-size: 26px;
  letter-spacing: .08em;
}
.adult-section::before {
  content: '🦇 ♥ 🦇';
  left: 18px;
  bottom: 14px;
  transform: rotate(-10deg);
}
.adult-section::after {
  content: '🦇 ♥ 🦇';
  right: 18px;
  top: 12px;
  transform: rotate(10deg);
}
.adult-section h2 { color: #f0b1b7; }
.adult-section p { color: #f0d0d3; }
.adult-enter {
  background: linear-gradient(180deg, #b24863, #7f2238);
  box-shadow: 0 10px 24px rgba(80,0,23,.25), inset 0 0 0 1px rgba(255,210,218,.10);
}
.adult-reset {
  background: linear-gradient(180deg, rgba(75,18,32,.75), rgba(33,8,14,.88));
}
.adult-links .link-card {
  border-color: rgba(231, 126, 149, .72);
  background:
    radial-gradient(circle at 12% 50%, rgba(42, 122, 196, .16), transparent 22%),
    radial-gradient(circle at 88% 50%, rgba(215, 72, 107, .12), transparent 18%),
    linear-gradient(180deg, rgba(22,15,20,.98), rgba(9,8,11,.995));
}
.adult-links .link-card:hover {
  border-color: rgba(255, 194, 211, .95);
}

@media (max-width: 680px) {
  .card-copy { padding-left: 2px; }
  .link-card { min-height: 78px; }
  .support-section > h2 { margin-bottom: 4px; }
}


/* V18: Button text truly centered horizontally */
.link-card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.link-card .card-copy {
  position: relative;
  z-index: 3;
  width: calc(100% - 72px);
  padding: 0;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 54px;
}

.link-card .card-title,
.link-card .card-subtitle {
  width: 100%;
  text-align: center;
}

.link-card .chevron {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.link-card .card-title::before {
  margin-right: 6px;
}

@media (max-width: 680px) {
  .link-card .card-copy {
    width: calc(100% - 54px);
  }
  .link-card .chevron {
    right: 12px;
  }
}


/* =========================
   V19 spacing + performance
   ========================= */

/* More air between the Support heading and the two buttons */
.support-section > h2 {
  margin-bottom: 18px !important;
}

.support-row {
  margin-top: 0 !important;
}

/* Smooth but lightweight hover: less GPU-heavy than the previous glow stack */
.link-card {
  contain: paint;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.link-card:hover {
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(242,201,156,.06);
}

/* Disable decorative particle motion on small screens to avoid stutter */
@media (max-width: 680px) {
  .ambient-petals { display: none; }
}

/* Respect OS accessibility / performance preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* =========================
   Stronger Succubus 18+ area
   ========================= */

.adult-section {
  margin-top: 24px;
  padding-top: 22px;
  border: 1px solid rgba(235, 99, 137, .72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 67, 128, .26), transparent 38%),
    radial-gradient(circle at 12% 10%, rgba(108, 0, 31, .46), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(108, 0, 31, .46), transparent 26%),
    linear-gradient(180deg, rgba(92, 14, 39, .97), rgba(39, 5, 18, .99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 199, 215, .07),
    0 14px 30px rgba(0,0,0,.22);
}

.adult-section::before,
.adult-section::after {
  content: "✦  ♥  ✦";
  color: rgba(255, 139, 171, .42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: .10em;
}

.adult-section h2 {
  margin-top: 4px;
  color: #f2b0bd;
  text-shadow: 0 0 12px rgba(211, 55, 96, .18);
}

.adult-section h2::before,
.adult-section h2::after {
  color: #c93760;
}

.adult-section p {
  color: #f0ccd5;
}

.adult-enter {
  border-color: rgba(255, 175, 198, .72);
  background:
    linear-gradient(180deg, #c24768, #81223f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 226, .08),
    0 8px 18px rgba(65, 0, 20, .20);
}

.adult-reset {
  border-color: rgba(224, 107, 139, .54);
  background: linear-gradient(180deg, rgba(88, 19, 42, .88), rgba(35, 7, 18, .94));
}

/* The Fansly/OnlyFans frames get a more demon/succubus tint */
.adult-links .link-card {
  --succubus-edge: rgba(230, 96, 136, .68);
  border-color: var(--succubus-edge);
  background:
    radial-gradient(circle at 10% 50%, rgba(177, 34, 81, .18), transparent 25%),
    radial-gradient(circle at 90% 50%, rgba(116, 28, 68, .16), transparent 22%),
    linear-gradient(180deg, rgba(25, 14, 21, .985), rgba(9, 7, 11, .995));
}

.adult-links .link-card::before {
  border-color: rgba(255, 166, 193, .12);
}

.adult-links .link-card .frame-corner::before {
  border-color: rgba(239, 128, 160, .70);
}

.adult-links .link-card .frame-corner::after {
  background: radial-gradient(circle, #ffd9e3, #d43e69);
}

.adult-links .link-card .frame-runic {
  filter: hue-rotate(320deg) saturate(1.3);
}

/* Pure-CSS succubus crest: heart + horns + wing silhouettes */
.succubus-crest {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: -6px auto 2px;
  position: relative;
  z-index: 2;
}

.succubus-heart {
  color: #ef4d78;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(239, 77, 120, .38),
    0 0 18px rgba(190, 35, 79, .22);
}

.succubus-horn {
  width: 11px;
  height: 19px;
  display: block;
  background: linear-gradient(180deg, #ffe9e5, #dba5a9 70%, #945064);
  border-radius: 80% 15% 70% 25%;
  box-shadow: 0 0 7px rgba(255, 180, 198, .12);
}

.succubus-horn.horn-left {
  transform: rotate(-26deg);
}

.succubus-horn.horn-right {
  transform: rotate(26deg) scaleX(-1);
}

.succubus-wing {
  width: 34px;
  height: 22px;
  display: block;
  position: relative;
  border-top: 3px solid #b52d55;
  border-radius: 50% 50% 0 0;
  opacity: .95;
}

.succubus-wing::before,
.succubus-wing::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid #b52d55;
  border-radius: 0 0 70% 0;
}

.succubus-wing::before { left: 2px; transform: rotate(16deg); }
.succubus-wing::after { right: 1px; transform: rotate(-16deg) scaleX(-1); }

.succubus-wing.wing-left {
  transform: rotate(-7deg);
}

.succubus-wing.wing-right {
  transform: rotate(7deg) scaleX(-1);
}

@media (max-width: 680px) {
  .support-section > h2 {
    margin-bottom: 14px !important;
  }
  .succubus-crest {
    height: 36px;
  }
  .succubus-heart {
    font-size: 27px;
  }
}


/* =========================================================
   V20 - persistent platform tint + hover hearts + tattoo mark
   ========================================================= */

/* Keep the platform's subtle background tint when hovering.
   This deliberately overrides the older generic hover background. */
.link-card:hover {
  background:
    radial-gradient(circle at 12% 50%, var(--platform-accent, rgba(151,34,59,.18)), transparent 24%),
    radial-gradient(circle at 88% 50%, rgba(233,181,126,.10), transparent 20%),
    linear-gradient(180deg, rgba(31,23,29,.985), rgba(12,10,13,.992));
}

/* Small heart appears next to the centered title without moving the title. */
.link-card .card-title {
  width: fit-content;
  max-width: calc(100% - 28px);
  align-self: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.link-card .card-title::after {
  content: "♥";
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%) scale(.72);
  color: #e65f83;
  font-size: .72em;
  opacity: 0;
  text-shadow: 0 0 7px rgba(230,95,131,.28);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}

.link-card:hover .card-title::after,
.link-card:focus-visible .card-title::after {
  opacity: .92;
  transform: translateY(-50%) scale(1);
}

/* 18+ cards should stay primarily succubus-styled even on hover. */
.adult-links .link-card:hover {
  background:
    radial-gradient(circle at 12% 50%, rgba(197, 42, 91, .24), transparent 25%),
    radial-gradient(circle at 88% 50%, rgba(116, 28, 68, .19), transparent 22%),
    linear-gradient(180deg, rgba(31,15,24,.99), rgba(11,7,12,.997));
  border-color: rgba(255, 165, 191, .88);
}

.adult-links .link-card .card-title::before {
  content: "♥";
  color: rgba(240, 92, 133, .78);
}

/* Gräfin's Succubus tattoo watermark:
   central magenta heart, dark symmetrical wing/tribal shapes,
   pointed darker ornament beneath. */
.succubus-tattoo-watermark {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(430px, 58%);
  height: 190px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: .105;
}

.adult-section > *:not(.succubus-tattoo-watermark) {
  position: relative;
  z-index: 2;
}

.tattoo-heart {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  color: #ff3d7c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 92px;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255, 61, 124, .30),
    0 0 20px rgba(183, 17, 72, .18);
}

.tattoo-wing {
  position: absolute;
  top: 50%;
  width: 44%;
  height: 96px;
  background:
    linear-gradient(160deg, rgba(10,0,6,.92), rgba(53,5,24,.82) 58%, rgba(129,17,54,.68));
  clip-path: polygon(
    0 52%, 14% 31%, 29% 38%, 42% 11%,
    55% 31%, 70% 6%, 79% 41%, 100% 50%,
    77% 59%, 69% 91%, 54% 67%, 40% 91%,
    28% 62%, 13% 70%
  );
  filter: drop-shadow(0 0 3px rgba(180,34,78,.18));
}

.tattoo-wing-left {
  right: 52%;
  transform: translateY(-50%);
}

.tattoo-wing-right {
  left: 52%;
  transform: translateY(-50%) scaleX(-1);
}

.tattoo-point {
  position: absolute;
  left: 50%;
  top: 71%;
  width: 46px;
  height: 57px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(173, 22, 67, .88), rgba(59, 4, 24, .92));
  clip-path: polygon(50% 100%, 0 17%, 31% 27%, 50% 0, 69% 27%, 100% 17%);
  filter: drop-shadow(0 0 3px rgba(184, 26, 74, .18));
}

@media (max-width: 680px) {
  .succubus-tattoo-watermark {
    width: 86%;
    height: 150px;
    top: 54%;
    opacity: .085;
  }
  .tattoo-heart {
    font-size: 68px;
  }
  .tattoo-wing {
    height: 74px;
  }
  .tattoo-point {
    width: 36px;
    height: 44px;
  }
}


/* =========================================================
   V21 – platform colours stay visible on hover
   ========================================================= */

/* Each platform gets its own subtle permanent tint. */
.link-card.platform-twitch {
  background:
    radial-gradient(circle at 13% 50%, rgba(145,70,255,.26), transparent 28%),
    linear-gradient(180deg, rgba(25,19,31,.98), rgba(11,9,14,.995)) !important;
}
.link-card.platform-youtube {
  background:
    radial-gradient(circle at 13% 50%, rgba(255,55,68,.24), transparent 28%),
    linear-gradient(180deg, rgba(31,18,22,.98), rgba(12,9,11,.995)) !important;
}
.link-card.platform-xMain,
.link-card.platform-xCozy {
  background:
    radial-gradient(circle at 13% 50%, rgba(184,104,126,.20), transparent 28%),
    linear-gradient(180deg, rgba(27,20,24,.98), rgba(11,9,12,.995)) !important;
}
.link-card.platform-instagram {
  background:
    radial-gradient(circle at 13% 50%, rgba(214,76,139,.24), transparent 28%),
    linear-gradient(180deg, rgba(31,18,27,.98), rgba(12,9,12,.995)) !important;
}
.link-card.platform-tiktok {
  background:
    radial-gradient(circle at 13% 50%, rgba(36,211,202,.16), transparent 28%),
    radial-gradient(circle at 18% 55%, rgba(244,55,103,.13), transparent 24%),
    linear-gradient(180deg, rgba(22,21,25,.98), rgba(10,10,13,.995)) !important;
}
.link-card.platform-bluesky {
  background:
    radial-gradient(circle at 13% 50%, rgba(65,145,255,.25), transparent 28%),
    linear-gradient(180deg, rgba(18,23,32,.98), rgba(9,10,14,.995)) !important;
}
.link-card.platform-discord {
  background:
    radial-gradient(circle at 13% 50%, rgba(99,114,255,.25), transparent 28%),
    linear-gradient(180deg, rgba(21,21,34,.98), rgba(10,10,14,.995)) !important;
}
.link-card.platform-amazon {
  background:
    radial-gradient(circle at 13% 50%, rgba(255,169,42,.22), transparent 28%),
    linear-gradient(180deg, rgba(31,24,17,.98), rgba(12,10,8,.995)) !important;
}
.link-card.platform-donate {
  background:
    radial-gradient(circle at 13% 50%, rgba(226,89,125,.24), transparent 28%),
    linear-gradient(180deg, rgba(31,19,25,.98), rgba(12,9,12,.995)) !important;
}

/* Hover keeps exactly the same platform tint.
   Only the border / glow / movement changes. */
.link-card.platform-twitch:hover,
.link-card.platform-youtube:hover,
.link-card.platform-xMain:hover,
.link-card.platform-xCozy:hover,
.link-card.platform-instagram:hover,
.link-card.platform-tiktok:hover,
.link-card.platform-bluesky:hover,
.link-card.platform-discord:hover,
.link-card.platform-amazon:hover,
.link-card.platform-donate:hover {
  filter: brightness(1.06);
  border-color: rgba(244,186,127,.96);
}

/* 18+ buttons: permanent succubus red/pink colour, including hover. */
.adult-links .link-card.platform-fansly,
.adult-links .link-card.platform-onlyfans {
  background:
    radial-gradient(circle at 13% 50%, rgba(201,43,93,.26), transparent 29%),
    radial-gradient(circle at 87% 50%, rgba(115,24,63,.21), transparent 26%),
    linear-gradient(180deg, rgba(35,15,25,.99), rgba(12,7,12,.997)) !important;
}

.adult-links .link-card.platform-fansly:hover,
.adult-links .link-card.platform-onlyfans:hover {
  background:
    radial-gradient(circle at 13% 50%, rgba(201,43,93,.26), transparent 29%),
    radial-gradient(circle at 87% 50%, rgba(115,24,63,.21), transparent 26%),
    linear-gradient(180deg, rgba(35,15,25,.99), rgba(12,7,12,.997)) !important;
  filter: brightness(1.07);
  border-color: rgba(255,165,191,.92);
}

/* Make the tattoo watermark actually visible but still subtle. */
.succubus-tattoo-watermark {
  opacity: .18 !important;
}


/* =========================================================
   V22 – actual Gräfin Succubus tattoo in 18+ area
   ========================================================= */

/* The old heart/horn/wing symbol is removed. */
.succubus-crest {
  display: none !important;
}

/* Real tattoo mark above the 18+ heading */
.succubus-tattoo-header {
  display: block;
  width: 150px;
  height: 65px;
  object-fit: contain;
  margin: -5px auto -7px;
  position: relative;
  z-index: 4;
  opacity: .96;
  filter:
    drop-shadow(0 0 5px rgba(239, 45, 118, .26))
    drop-shadow(0 4px 6px rgba(0,0,0,.22));
}

/* The same tattoo is now the large background watermark.
   It is deliberately more visible than V21. */
.adult-section .succubus-tattoo-watermark {
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  width: min(610px, 76%) !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  opacity: .28 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  object-fit: contain;
  filter:
    saturate(1.18)
    brightness(1.08)
    drop-shadow(0 0 14px rgba(225, 40, 105, .14));
}

/* Give the watermark a little light behind it so the dark tribal wings
   remain readable on the dark red panel. */
.adult-section {
  background:
    radial-gradient(ellipse at 50% 57%, rgba(157, 37, 78, .29) 0%, rgba(93, 13, 43, .12) 34%, transparent 58%),
    radial-gradient(circle at 50% -12%, rgba(255, 67, 128, .26), transparent 38%),
    radial-gradient(circle at 12% 10%, rgba(108, 0, 31, .46), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(108, 0, 31, .46), transparent 26%),
    linear-gradient(180deg, rgba(92, 14, 39, .97), rgba(39, 5, 18, .99)) !important;
}

/* Keep all readable content above the tattoo. */
.adult-section > h2,
.adult-section > p,
.adult-section > .adult-enter,
.adult-section > .adult-links,
.adult-section > .adult-reset,
.adult-section > .succubus-tattoo-header {
  position: relative;
  z-index: 3;
}

/* Disable the previous CSS tattoo pieces completely. */
.tattoo-heart,
.tattoo-wing,
.tattoo-point {
  display: none !important;
}

@media (max-width: 680px) {
  .succubus-tattoo-header {
    width: 125px;
    height: 55px;
    margin-bottom: -5px;
  }

  .adult-section .succubus-tattoo-watermark {
    width: 92% !important;
    top: 60% !important;
    opacity: .22 !important;
  }
}


/* =========================================================
   V23 – exact Gräfin tattoo reference in the 18+ area
   ========================================================= */

/* Remove the old decorative corner/heart symbols from the red 18+ block.
   The tattoo is now the visual identity of this section. */
.adult-section::before,
.adult-section::after {
  content: none !important;
  display: none !important;
}

/* Actual Gräfin Succubus tattoo directly above "18+ Bereich" */
.succubus-tattoo-header {
  display: block !important;
  width: min(300px, 42vw) !important;
  height: auto !important;
  margin: -4px auto -8px !important;
  position: relative !important;
  z-index: 5 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 5px rgba(245, 65, 139, .32))
    drop-shadow(0 4px 9px rgba(0,0,0,.26)) !important;
}

/* Larger and more visible copy as background watermark */
.adult-section .succubus-tattoo-watermark {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 59% !important;
  width: min(830px, 84%) !important;
  max-width: none !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  opacity: .34 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  object-fit: contain !important;
  filter:
    saturate(1.22)
    brightness(1.28)
    contrast(1.04)
    drop-shadow(0 0 20px rgba(244, 49, 126, .22)) !important;
}

/* Soft light behind the real tattoo so both the magenta and dark tribal
   parts remain readable on the dark red panel. */
.adult-section {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(189, 66, 111, .34) 0%, rgba(111, 22, 57, .18) 34%, transparent 63%),
    radial-gradient(circle at 50% -12%, rgba(255, 67, 128, .24), transparent 38%),
    linear-gradient(180deg, rgba(89, 13, 38, .975), rgba(35, 5, 17, .995)) !important;
}

/* Everything interactive/readable stays above the watermark. */
.adult-section > h2,
.adult-section > p,
.adult-section > .adult-enter,
.adult-section > .adult-links,
.adult-section > .adult-reset,
.adult-section > .succubus-tattoo-header {
  position: relative !important;
  z-index: 4 !important;
}

.adult-section h2 {
  margin-top: 5px !important;
}

/* Remove every older CSS-made tattoo/crest part. */
.succubus-crest,
.tattoo-heart,
.tattoo-wing,
.tattoo-point,
.succubus-heart,
.succubus-horn,
.succubus-wing {
  display: none !important;
}

@media (max-width: 680px) {
  .succubus-tattoo-header {
    width: min(235px, 68vw) !important;
    margin-bottom: -5px !important;
  }

  .adult-section .succubus-tattoo-watermark {
    width: 96% !important;
    top: 61% !important;
    opacity: .29 !important;
  }
}


/* =========================================================
   V24 – cleaner 18+ section
   ========================================================= */

/* No tattoo above the 18+ heading */
.succubus-tattoo-header {
  display: none !important;
}

/* Keep the actual Gräfin tattoo only as a subtle background watermark */
.adult-section .succubus-tattoo-watermark {
  width: min(760px, 78%) !important;
  top: 60% !important;
  opacity: .14 !important;
  filter:
    saturate(1.08)
    brightness(.96)
    contrast(1.02)
    drop-shadow(0 0 10px rgba(244, 49, 126, .10)) !important;
}

/* Compact the section again now that the top tattoo is gone */
.adult-section {
  padding-top: 18px !important;
}

.adult-section h2 {
  margin-top: 2px !important;
}

@media (max-width: 680px) {
  .adult-section .succubus-tattoo-watermark {
    width: 90% !important;
    top: 61% !important;
    opacity: .11 !important;
  }
}


/* =========================================================
   V25 – compact Support section, less empty space
   ========================================================= */

/* Nari no longer determines the whole row height.
   She floats at the right edge as decoration. */
.support-section {
  position: relative;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.support-section > h2 {
  width: calc(100% - 205px) !important;
  margin: 4px 0 14px !important;
  text-align: center !important;
}

/* The button area uses the space left of Nari but stays compact vertically. */
.support-row {
  display: block !important;
  margin-top: 0 !important;
  min-height: 82px;
}

.support-cards {
  width: calc(100% - 205px);
  margin: 0 !important;
  align-self: auto !important;
}

/* Put sleeping Nari on top of the section instead of giving her a whole grid column. */
.sleeping-nari-box {
  position: absolute !important;
  right: 25px;
  bottom: 6px;
  width: 180px;
  min-height: 0 !important;
  height: auto;
  display: block !important;
  pointer-events: none;
  z-index: 3;
}

.sleeping-nari-box img {
  display: block;
  width: 180px !important;
  max-width: 100%;
  margin: 0 auto;
}

/* Keep the panel itself visually compact. */
.support-section::before {
  inset-bottom: 4px;
}

/* Slightly tighten only the support button height. */
.support-cards .link-card {
  min-height: 74px;
}

/* Tablet */
@media (max-width: 960px) and (min-width: 681px) {
  .support-section > h2,
  .support-cards {
    width: calc(100% - 175px) !important;
  }

  .sleeping-nari-box {
    right: 12px;
    width: 155px;
  }

  .sleeping-nari-box img {
    width: 155px !important;
  }
}

/* Mobile: return Nari to normal flow below the buttons. */
@media (max-width: 680px) {
  .support-section {
    padding-bottom: 10px !important;
  }

  .support-section > h2,
  .support-cards {
    width: 100% !important;
  }

  .support-section > h2 {
    margin-bottom: 12px !important;
  }

  .support-row {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
  }

  .sleeping-nari-box {
    position: static !important;
    width: 100%;
    margin-top: 2px;
    display: flex !important;
    justify-content: center;
  }

  .sleeping-nari-box img {
    width: 145px !important;
  }
}


/* =========================================================
   V28 – cleaner mobile layout
   ========================================================= */

@media (max-width: 680px) {
  /* Less giant empty panels on phone */
  .content-section {
    padding: 12px 3.5% 10px !important;
    margin-top: 5px !important;
  }

  .content-section::before {
    inset: 3px 1.5% !important;
    border-radius: 16px !important;
  }

  .content-section::after {
    top: 8px !important;
    right: 16px !important;
    font-size: 10px !important;
    opacity: .65;
  }

  /* Headings should not dominate the whole screen */
  h2 {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.08 !important;
    margin: 7px 0 13px !important;
  }

  /* All platform buttons in one column on mobile.
     This fixes cramped Instagram/Twitter labels. */
  .two-cols,
  .social-grid {
    grid-template-columns: 1fr !important;
  }

  .social-grid .centered {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* Slightly shorter, wider-feeling mobile buttons */
  .link-card {
    width: 100%;
    min-height: 72px !important;
    padding: 10px 18px !important;
    box-sizing: border-box;
  }

  .link-card .card-copy {
    width: calc(100% - 46px) !important;
    min-height: 48px !important;
    padding: 0 !important;
  }

  .card-title {
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .card-subtitle {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-top: 5px !important;
    white-space: normal !important;
  }

  .link-card .chevron {
    right: 14px !important;
    font-size: 21px !important;
  }

  /* Community should match the other buttons, not become extra tall */
  .community-wrap .link-card {
    width: 100% !important;
  }

  /* Support: compact, one button per row, Nari below */
  .support-section > h2 {
    width: 100% !important;
    margin: 7px 0 13px !important;
  }

  .support-cards {
    width: 100% !important;
  }

  .support-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .sleeping-nari-box {
    margin-top: 6px !important;
  }

  .sleeping-nari-box img {
    width: 132px !important;
  }

  /* Adult area a bit tighter on phone */
  .adult-section {
    margin: 12px 3.5% 4px !important;
    padding: 15px 12px 13px !important;
  }

  /* Footer text links wrap more cleanly */
  .footer-text-link {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   V29 – 100% HTML + CSS, no JavaScript
   ========================================================= */
.utility-bar-no-share { justify-content: flex-end !important; }

.lang-switch a {
  display: inline-block;
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  color: #c8a486;
  background: transparent;
  text-decoration: none;
  font: inherit;
}
.lang-switch a:hover { color: #ffe7ce; background: rgba(86,31,43,.48); }
.lang-switch a.active {
  color: #ffe7ce;
  background: linear-gradient(180deg, #742c3a, #41131c);
  box-shadow: inset 0 0 0 1px rgba(237,177,120,.22);
}
.lang-switch a:focus-visible { outline: 2px solid #e3ad75; outline-offset: 3px; }

/* Fixed petal variation replaces all former Math.random() values. */
.ambient-petals .petal:nth-child(1) { left: 7%;  animation-duration: 21s; animation-delay: -4s;  opacity: .25; }
.ambient-petals .petal:nth-child(2) { left: 19%; animation-duration: 26s; animation-delay: -13s; opacity: .31; }
.ambient-petals .petal:nth-child(3) { left: 34%; animation-duration: 18s; animation-delay: -8s;  opacity: .22; }
.ambient-petals .petal:nth-child(4) { left: 47%; animation-duration: 24s; animation-delay: -17s; opacity: .38; }
.ambient-petals .petal:nth-child(5) { left: 61%; animation-duration: 28s; animation-delay: -6s;  opacity: .27; }
.ambient-petals .petal:nth-child(6) { left: 73%; animation-duration: 20s; animation-delay: -15s; opacity: .34; }
.ambient-petals .petal:nth-child(7) { left: 86%; animation-duration: 25s; animation-delay: -10s; opacity: .23; }
.ambient-petals .petal:nth-child(8) { left: 95%; animation-duration: 19s; animation-delay: -2s;  opacity: .30; }

/* Native HTML <details> is the entire 18+ gate. */
.adult-gate { margin-top: 12px; }
.adult-gate > summary { list-style: none; width: fit-content; margin-left: auto; margin-right: auto; }
.adult-gate > summary::-webkit-details-marker { display: none; }
.adult-gate > summary::marker { content: ""; }
.adult-gate .adult-label-open { display: none; }
.adult-gate[open] .adult-label-closed { display: none; }
.adult-gate[open] .adult-label-open { display: inline; }
.adult-gate .adult-links { margin-top: 12px; }
.adult-gate:not([open]) .adult-links { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petal { animation: none !important; display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}