/* =========================================
   Forest Hub — FINAL STABLE VERSION
   Locked icon system + scalable card structure
   ========================================= */

body.forest .container {
  max-width: 980px;
}

body.forest .header {
  margin-bottom: 2.2rem;
}

body.forest .title-block .subtitle {
  opacity: 0.92;
}

body.forest .intro {
  max-width: 760px;
  margin-bottom: 2.2rem;
}

body.forest .intro p {
  margin-bottom: 1rem;
}

body.forest .intro .closing {
  margin-top: 1.45rem;
}

/* =========================
   Grid + Cards
   ========================= */

.forest-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.forest-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 1.3rem;

  padding: 1.25rem 1.5rem;

  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(214, 229, 215, 0.12);
  border-radius: 24px;

  background: rgba(10, 32, 20, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 8px 28px rgba(0,0,0,0.14);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    opacity 0.22s ease;
}

.forest-card:hover {
  transform: translateY(-2px);
  background: rgba(11, 38, 23, 0.52);
  border-color: rgba(230, 197, 104, 0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 22px rgba(230, 197, 104, 0.08);
}

/* =========================
   Primary card
   ========================= */

.primary-card {
  border-color: rgba(164, 205, 168, 0.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    rgba(12, 39, 24, 0.46);
}

.primary-card:hover {
  border-color: rgba(164, 205, 168, 0.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(96, 177, 106, 0.10);
}

/* Forest Quest card */
.card-quest {
  border-color: rgba(120, 230, 170, 0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(18, 55, 32, 0.65);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 10px 30px rgba(0,0,0,0.16),
    0 0 26px rgba(95, 215, 145, 0.10),
    0 0 44px rgba(70, 190, 255, 0.045);
}

.card-quest:hover {
  border-color: rgba(140, 235, 175, 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(20, 62, 36, 0.68);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 36px rgba(0,0,0,0.19),
    0 0 24px rgba(95, 220, 150, 0.18),
    0 0 40px rgba(70, 190, 255, 0.08);
}

/* =========================
   Category hover accents
   ========================= */

.card-spirit:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(170, 130, 220, 0.10);
}

.card-roots:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(230, 180, 90, 0.12);
}

.card-action:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(230, 185, 92, 0.10);
}

.card-witness:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(216, 221, 206, 0.10);
}

.card-home {
  opacity: 0.95;
}

.card-home:hover {
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 12px 34px rgba(0,0,0,0.18),
    0 0 24px rgba(167, 176, 148, 0.08);
}

/* =========================
   Badge system
   ========================= */

.badge-shell {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-round {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: none !important;
  border-radius: 50%;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible;
  isolation: isolate;
}

/* inner lift */
.badge-round::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 34%,
    rgba(255,255,255,0) 74%
  );
  filter: blur(8px);
  opacity: 0.5;
  z-index: 0;
}

/* outer glow */
.badge-round::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(222, 194, 118, 0.18) 0%,
    rgba(222, 194, 118, 0.09) 34%,
    rgba(222, 194, 118, 0) 74%
  );
  filter: blur(16px);
  opacity: 0.75;
  z-index: 0;
}

/* =========================
   Icon rendering
   ========================= */

.badge-round img {
  position: relative;
  z-index: 1;

  width: 78px !important;
  height: 78px !important;

  object-fit: contain;
  display: block;

  border: none !important;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;

  filter:
    drop-shadow(0 0 8px rgba(230, 197, 104, 0.16))
    drop-shadow(0 0 16px rgba(230, 197, 104, 0.08));

  transition:
    transform 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
}

.forest-card:hover .badge-round img {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 10px rgba(236, 208, 130, 0.22))
    drop-shadow(0 0 22px rgba(236, 208, 130, 0.12));
}

/* =========================
   Optical balance
   ========================= */

.card-forest .badge-round img,
.card-action .badge-round img,
.card-home .badge-round img,
.card-quest .badge-round img {
  width: 72px !important;
  height: 72px !important;
}

.badge-elowen img,
.card-spirit .badge-round img {
  width: 94px !important;
  height: 94px !important;
}

.badge-gog img,
.card-roots .badge-round img {
  width: 84px !important;
  height: 84px !important;
}

/* Witness refined */
.badge-witness img,
.card-witness .badge-round img {
  width: 82px !important;
  height: 82px !important;
  filter:
    brightness(1.08)
    contrast(0.94)
    saturate(0.92)
    drop-shadow(0 0 5px rgba(235, 214, 145, 0.08))
    drop-shadow(0 0 12px rgba(235, 214, 145, 0.03));
  opacity: 0.92;
}

/* Slightly stronger presence for Home, not bigger */
.card-home .badge-round img {
  filter:
    drop-shadow(0 0 10px rgba(210, 205, 140, 0.16))
    drop-shadow(0 0 20px rgba(210, 205, 140, 0.10));
}

/* =========================
   Glow groups
   ========================= */

.card-forest .badge-round::after,
.card-roots .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(138, 192, 110, 0.18) 0%,
    rgba(220, 181, 95, 0.10) 34%,
    rgba(138, 192, 110, 0) 74%
  );
  filter: blur(18px);
  opacity: 0.82;
}

.card-spirit .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(214, 190, 121, 0.16) 0%,
    rgba(156, 130, 198, 0.11) 34%,
    rgba(214, 190, 121, 0) 74%
  );
  filter: blur(20px);
  opacity: 0.9;
}

.card-action .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(230, 191, 92, 0.18) 0%,
    rgba(201, 145, 52, 0.09) 34%,
    rgba(230, 191, 92, 0) 74%
  );
  filter: blur(17px);
  opacity: 0.78;
}

.card-witness .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(232, 223, 184, 0.12) 0%,
    rgba(214, 190, 121, 0.04) 34%,
    rgba(232, 223, 184, 0) 74%
  );
  filter: blur(16px);
  opacity: 0.52;
}

.card-home .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(173, 173, 132, 0.12) 0%,
    rgba(121, 150, 101, 0.07) 34%,
    rgba(173, 173, 132, 0) 74%
  );
  filter: blur(16px);
  opacity: 0.58;
}


.card-quest .badge-round::after {
  background: radial-gradient(
    circle,
    rgba(138, 205, 110, 0.24) 0%,
    rgba(95, 215, 255, 0.14) 38%,
    rgba(138, 192, 110, 0) 76%
  );
  filter: blur(22px);
  opacity: 0.98;
}


.card-quest .badge-round img {
  filter:
    drop-shadow(0 0 10px rgba(230, 197, 104, 0.18))
    drop-shadow(0 0 20px rgba(110, 215, 145, 0.16))
    drop-shadow(0 0 30px rgba(70, 190, 255, 0.10));
}

.forest-card.card-quest:hover .badge-round img {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 12px rgba(236, 208, 130, 0.22))
    drop-shadow(0 0 24px rgba(110, 220, 150, 0.22))
    drop-shadow(0 0 36px rgba(70, 190, 255, 0.14));
}

/* =========================
   Narrative icons
   ========================= */

.badge-elowen,
.badge-gog {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.badge-elowen img,
.badge-gog img {
  border-radius: 50%;
  overflow: hidden;
}

.badge-elowen img {
  filter:
    drop-shadow(0 0 10px rgba(185, 145, 220, 0.22))
    drop-shadow(0 0 22px rgba(185, 145, 220, 0.14));
}

.forest-card:hover .badge-elowen img {
  filter:
    drop-shadow(0 0 12px rgba(205, 170, 235, 0.28))
    drop-shadow(0 0 26px rgba(185, 145, 220, 0.18));
}

.badge-gog img {
  filter:
    drop-shadow(0 0 8px rgba(236, 186, 88, 0.18))
    drop-shadow(0 0 18px rgba(236, 186, 88, 0.12));
}

.forest-card:hover .badge-gog img {
  filter:
    drop-shadow(0 0 10px rgba(245, 205, 120, 0.24))
    drop-shadow(0 0 24px rgba(236, 186, 88, 0.16));
}

/* =========================
   Text
   ========================= */

.card-body {
  min-width: 0;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.card-title {
  font-size: 1.16rem;
  font-weight: 700;
  color: #f1f5f2;
}

.card-sub {
  font-size: 1rem;
  color: rgba(233, 239, 234, 0.90);
}

.card-arrow {
  font-size: 1.2rem;
  color: rgba(233, 239, 234, 0.80);
  opacity: 0.88;
  transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.forest-card:hover .card-arrow {
  transform: translateX(2px);
  color: rgba(255,255,255,0.98);
  opacity: 1;
}

/* =========================
   

/* =========================
   QUEST STATES SYSTEM
   ========================= */

/* OFF */
.quest-off .card-quest {
  display: none;
}

/* SOON */
.quest-soon .card-quest {
  opacity: 0.6;
  pointer-events: none;
}

.quest-soon .card-quest .card-sub {
  color: transparent;
  position: relative;
}

.quest-soon .card-quest .card-sub::after {
  content: "Coming soon — a new path will open here.";
  color: rgba(233, 239, 234, 0.75);
  position: absolute;
  left: 0;
  top: 0;
}