@import url('/assets/forum-v2/forum-v3.css');

/* Decorative layer shared with the Neverworlds landing page. */
.nw-app {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -8%,rgba(217,179,108,.13),transparent 36rem),
    radial-gradient(circle at -5% 34%,rgba(75,168,181,.09),transparent 30rem),
    radial-gradient(circle at 105% 58%,rgba(189,63,63,.11),transparent 32rem),
    linear-gradient(180deg,#090b10,#0c0f15 42%,#090b10);
}

.nw-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background:
    repeating-linear-gradient(135deg,transparent 0 34px,rgba(241,213,150,.018) 35px,transparent 36px),
    linear-gradient(90deg,rgba(217,179,108,.035),transparent 12%,transparent 88%,rgba(217,179,108,.035));
  mask-image: linear-gradient(180deg,#000,rgba(0,0,0,.72) 70%,transparent);
}

.nw-main {
  position: relative;
}

.nw-main::before,
.nw-main::after {
  content: "";
  position: absolute;
  top: 454px;
  bottom: 80px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,transparent,rgba(217,179,108,.18) 12%,rgba(217,179,108,.07) 88%,transparent);
}
.nw-main::before { left: -18px; }
.nw-main::after { right: -18px; }

.nw-hero {
  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(217,179,108,.05) inset;
}

.nw-hero h1::after {
  content: "";
  display: block;
  width: 112px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg,#e16758,#d9b36c,transparent);
  box-shadow: 0 0 18px rgba(225,103,88,.38);
}

.nw-stat {
  position: relative;
  overflow: hidden;
}
.nw-stat::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -22px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(217,179,108,.12);
  transform: rotate(45deg);
}

.nw-category {
  position: relative;
  overflow: hidden;
  border-color: rgba(217,179,108,.16);
  box-shadow:
    0 22px 54px rgba(0,0,0,.26),
    0 1px rgba(255,255,255,.025) inset;
}

.nw-category::before,
.nw-category::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.nw-category::before {
  top: 7px;
  left: 7px;
  border-top: 1px solid rgba(241,213,150,.55);
  border-left: 1px solid rgba(241,213,150,.55);
}
.nw-category::after {
  right: 7px;
  bottom: 7px;
  border-right: 1px solid rgba(241,213,150,.25);
  border-bottom: 1px solid rgba(241,213,150,.25);
}

.nw-category__head {
  position: relative;
  min-height: 64px;
  padding-left: 68px;
  background:
    linear-gradient(90deg,rgba(217,179,108,.16),rgba(189,63,63,.07) 62%,rgba(75,168,181,.035)),
    #151820;
}

.nw-category__head::before {
  content: "✦";
  position: absolute;
  left: 23px;
  top: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217,179,108,.48);
  background: linear-gradient(145deg,#241f1c,#13171e);
  color: #f1d596;
  font-size: 12px;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 20px rgba(217,179,108,.08);
}

.nw-category__head::after {
  content: "";
  position: absolute;
  left: 68px;
  right: 22px;
  bottom: 10px;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg,rgba(217,179,108,.52),transparent 52%);
}

.nw-category__head h2 {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

.nw-category:nth-of-type(2n) .nw-category__head {
  background:
    linear-gradient(90deg,rgba(189,63,63,.13),rgba(217,179,108,.07) 62%,rgba(75,168,181,.035)),
    #151820;
}
.nw-category:nth-of-type(3n) .nw-category__head::before {
  border-color: rgba(75,168,181,.48);
  color: #81c7d0;
}

.nw-section {
  position: relative;
  background: linear-gradient(90deg,rgba(255,255,255,.008),transparent 42%);
}

.nw-section::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 1px;
  opacity: 0;
  background: linear-gradient(transparent,#d9b36c,transparent);
  transition: opacity .2s;
}
.nw-section:hover::after { opacity: .7; }

.nw-section__icon,
.nw-topic__icon {
  position: relative;
  box-shadow:
    0 9px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(241,213,150,.04) inset;
}
.nw-section__icon::after,
.nw-topic__icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(241,213,150,.10);
  pointer-events: none;
}

.nw-topic-list,
.nw-composer,
.nw-post {
  position: relative;
  border-color: rgba(217,179,108,.17);
  box-shadow: 0 24px 60px rgba(0,0,0,.27);
}

.nw-post__author::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg,#d9b36c,transparent);
}

.nw-footer {
  position: relative;
  margin-top: 50px;
  padding-top: 30px;
}
.nw-footer::before {
  content: "✦";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217,179,108,.32);
  background: #0b0e13;
  color: #d9b36c;
  transform: translateX(-50%) rotate(45deg);
  font-size: 10px;
}

@media (max-width:640px) {
  .nw-main::before,.nw-main::after { display: none; }
  .nw-category__head { min-height: 58px; padding-left: 58px; }
  .nw-category__head::before { left: 19px; width: 23px; height: 23px; }
  .nw-category__head::after { left: 58px; }
  .nw-category::before,.nw-category::after { width: 12px; height: 12px; }
  .nw-hero h1::after { width: 82px; margin-top: 16px; }
}