/* ---------- What's New, the hero overlay panel ----------
   A text-only card floating over the top right of the Dark Reef hero on
   the home page. It links to the Updates page and to whatever docs the
   latest entries are about. Nothing here styles the Updates page itself,
   that is updates.css.

   It sits above .reef-intro::after (the hero's bottom gradient, no
   z-index) and beside .reef-intro-copy (z-index 1), so it takes 2.
   ASCII only, per house rules. */

.whats-new {
  position: absolute;
  top: clamp(14px, 2.4vw, 34px);
  right: clamp(18px, 4vw, 48px);
  z-index: 2;
  width: clamp(230px, 24vw, 330px);
  padding: clamp(12px, 1.4vw, 18px);
  border: 1px solid rgba(215, 255, 70, 0.22);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.82);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.whats-new-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(215, 255, 70, 0.18);
}

.whats-new-title {
  margin: 0;
  color: #dfff3f;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.whats-new-date {
  color: rgba(201, 248, 106, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.72vw, 11px);
  white-space: nowrap;
}

.whats-new-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.whats-new-list li {
  margin: 0 0 8px;
  padding: 0;
  color: #c9f86a;
  font-size: clamp(10.5px, 0.86vw, 12.5px);
  line-height: 1.45;
}

.whats-new-list li:last-child { margin-bottom: 0; }

.whats-new-list a {
  color: #dfff3f;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(223, 255, 63, 0.35);
}

.whats-new-list a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.whats-new-more {
  display: inline-block;
  margin-top: 12px;
  color: #dfff3f;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
}

.whats-new-more:hover { color: #fff; }

/* At the width where .reef-intro-copy stops being an overlay and becomes a
   plain block, this panel follows it. It cannot collide with the headline
   above that width, since the copy sits at the BOTTOM of the hero and this
   sits at the top, so there is only the one breakpoint. */
@media (max-width: 620px) {
  .whats-new {
    position: static;
    width: auto;
    margin: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }
}