/* ==========================================================================
   Planet Clicker 2 - the parts the first game did not have.

   Everything here is new to the sequel: Dark Matter and the rebirth loop,
   the awards grid, comets, and the small stage additions that come with six
   worlds instead of three.

   Loaded after components.css and before responsive.css, so it can override
   the shared component styles and still lose to the media queries.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.topbar__name-two {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: 0.4em;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--violet), var(--dark-matter-deep));
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--glow-violet);
}

/* --------------------------------------------------------------------------
   Dark Matter readout in the header
   -------------------------------------------------------------------------- */

.stat--dark .stat__value {
  color: var(--dark-matter);
  text-shadow: 0 0 18px rgba(196, 165, 255, 0.45);
}

.stat--dark .stat__label { color: var(--dark-matter); opacity: 0.75; }

/* Before the first rebirth this is a column of zeroes explaining nothing, so
   the game hides it until Dark Matter is actually in play. */
.stat--dark[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.stage__tagline {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 0.86rem;
  max-width: 42ch;
}

.meta-pill--boost {
  border-color: rgba(159, 228, 255, 0.55);
  background: rgba(159, 228, 255, 0.1);
  animation: boost-pulse 1.6s ease-in-out infinite;
}

.meta-pill--boost .meta-pill__label { color: var(--comet); }
.meta-pill--boost .meta-pill__value { color: var(--comet-bright); }

@keyframes boost-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(159, 228, 255, 0); }
  50%      { box-shadow: var(--glow-comet); }
}

/* --------------------------------------------------------------------------
   Comets

   The layer covers the whole game shell and ignores the pointer; only the
   comet itself is clickable. Each comet is a single element that flies across
   on one CSS transition, so the animation never touches the main thread.
   -------------------------------------------------------------------------- */

.comet-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}

.comet {
  position: absolute;
  top: var(--comet-top, 20%);
  left: 0;
  width: clamp(78px, 11vw, 132px);
  padding: 0;
  border: none;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(159, 228, 255, 0.8));
  /* Placed by JS as a starting transform, then transitioned to the far side. */
  transition: transform var(--comet-duration, 11s) linear;
  will-change: transform;
}

/* Comets travelling right to left are the same artwork flipped, so the tail
   always trails behind the head. */
.comet--reverse .comet-svg { transform: scaleX(-1); }

.comet:hover { filter: drop-shadow(0 0 22px rgba(230, 248, 255, 0.95)); }

.comet-svg { width: 100%; height: auto; }

/* Caught: a quick flash outwards rather than simply vanishing, so a hit reads
   as a hit even when the player has already looked away from the cursor. */
.comet.is-caught {
  animation: comet-burst 320ms var(--ease) forwards;
  pointer-events: none;
}

@keyframes comet-burst {
  from { opacity: 1; }
  to   { opacity: 0; filter: brightness(2.4) drop-shadow(0 0 40px #fff); }
}

@media (prefers-reduced-motion: reduce) {
  .comet { transition-duration: var(--comet-duration, 11s) !important; }
}

/* --------------------------------------------------------------------------
   Rebirth
   -------------------------------------------------------------------------- */

.rebirth {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 22px);
}

.rebirth__headline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(196, 165, 255, 0.16), transparent 60%),
    var(--surface);
}

.rebirth__glyph,
.rebirth-modal__glyph {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--dark-matter-bright), var(--dark-matter) 45%,
      var(--dark-matter-deep) 100%);
  box-shadow: var(--glow-dark-matter);
  animation: dm-breathe 4s ease-in-out infinite;
}

.rebirth-modal__glyph {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
}

@keyframes dm-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.rebirth__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rebirth__held {
  display: block;
  font-family: var(--font-num);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--dark-matter-bright);
}

.rebirth__bonus {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.rebirth__gain {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  background: rgba(14, 18, 38, 0.6);
}

.rebirth__gain-label {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.rebirth__gain-value {
  display: block;
  margin: 4px 0;
  font-family: var(--font-num);
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--dark-matter);
}

.rebirth__gain--ready .rebirth__gain-value {
  color: var(--dark-matter-bright);
  text-shadow: var(--glow-dark-matter);
}

.rebirth__gain-next {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.rebirth__text {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.rebirth__text--muted { color: var(--text-dim); font-size: 0.84rem; }

#btn-rebirth:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Awards

   A dense grid rather than a list. There are around fifty of these and the
   point of the pane is to see at a glance how much of the set is left, which a
   long scrolling list does not give you.
   -------------------------------------------------------------------------- */

.awards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  padding: 0 clamp(12px, 2vw, 18px) clamp(14px, 2.4vw, 22px);
}

.award {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.award__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-dim);
}

.award__body {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-dim);
  opacity: 0.72;
}

/* Locked awards keep their title and description readable rather than being
   blanked out. Knowing what is still out there is the whole draw. */
.award--locked { opacity: 0.62; }

.award--earned {
  border-color: rgba(251, 191, 92, 0.5);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(251, 191, 92, 0.14), transparent 62%),
    var(--surface-2);
}

.award--earned .award__title { color: var(--amber); }
.award--earned .award__body { color: var(--text-muted); opacity: 1; }

.award--new { animation: award-pop 520ms var(--ease); }

@keyframes award-pop {
  0%   { transform: scale(0.9); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.awards-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 clamp(12px, 2vw, 18px) 10px;
}

.awards-summary__count {
  font-family: var(--font-num);
  font-size: 1.2rem;
  color: var(--amber);
}

.awards-summary__text { font-size: 0.82rem; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Tabs

   Five of them now instead of three. On anything narrow they scroll sideways
   rather than wrapping onto a second row, which would eat a chunk of the
   sidebar that the shop needs more.
   -------------------------------------------------------------------------- */

.tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab { flex-shrink: 0; padding-inline: 13px; }

.tab__badge--hot {
  background: var(--dark-matter);
  color: #17102e;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(196, 165, 255, 0); }
  50%      { box-shadow: 0 0 14px rgba(196, 165, 255, 0.9); }
}

/* --------------------------------------------------------------------------
   Modal actions row
   -------------------------------------------------------------------------- */

.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.modal__actions .btn { min-width: 132px; }

/* --------------------------------------------------------------------------
   Shop, with a world's worth of machines at a time
   -------------------------------------------------------------------------- */

.shop-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* The lattice machines multiply everything rather than adding output, and they
   are capped. Marking them apart stops them reading as an overpriced producer. */
.shop-card--multiplier {
  border-color: rgba(139, 92, 246, 0.42);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
    var(--surface);
}

.shop-card__tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.22);
  color: var(--violet-bright);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Welcome back panel
   -------------------------------------------------------------------------- */

.offline__glyph {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--energy-bright), var(--energy) 45%,
      var(--energy-dim) 100%);
  box-shadow: var(--glow-energy);
  animation: dm-breathe 4s ease-in-out infinite;
}

.offline__note {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-dim);
}