/* ═══════════════════════════════════════════════════════════════
   Anchor HQ — Activity Section (Adventure Log)
   Stardew Valley parchment-book theme with vine timeline,
   gem icons, bookmark dividers, and warm golden hover glow.
   ═══════════════════════════════════════════════════════════════ */

/* ── Filters bar ──────────────────────────────────────────────── */
.activity-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-btn {
  padding: 5px 13px;
  border-radius: 2px;
  border: 2px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body, 'Inter', sans-serif);
  transition: all 180ms ease;
  text-transform: uppercase;
  letter-spacing: .03em;
  position: relative;
  image-rendering: pixelated;
}

/* Pixel-notch on top-left corner */
.filter-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  background: var(--panel, #2a1f14);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--gold-soft, rgba(218, 165, 32, 0.18));
  color: var(--gold-bright, #f0c040);
  border-color: var(--gold, #daa520);
  box-shadow:
    0 0 0 1px var(--gold-soft, rgba(218, 165, 32, 0.15)),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.filter-btn.active {
  background: var(--gold-soft, rgba(218, 165, 32, 0.22));
  box-shadow:
    0 0 8px rgba(218, 165, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Search input ─────────────────────────────────────────────── */
.search-input {
  flex: 1;
  min-width: 160px;
  padding: 7px 12px;
  border-radius: 2px;
  border: 2px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  font-size: .78rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(218, 165, 32, 0.15);
}

.search-input::placeholder {
  color: var(--muted);
  font-style: italic;
  font-size: .72rem;
}

/* ── Activity list — vine / rope timeline ─────────────────────── */
.activity-list {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 18px;
}

/* Vertical vine / rope connecting all entries */
.activity-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 3px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--green, #5a8a3c) 0px,
      var(--green, #5a8a3c) 6px,
      rgba(90, 138, 60, 0.3) 6px,
      rgba(90, 138, 60, 0.3) 8px
    );
  border-radius: 2px;
  image-rendering: pixelated;
  z-index: 0;
}

/* Little leaf accents along the vine (every entry grows one) */
.activity-list::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 8px;
  height: 8px;
  background: var(--green, #5a8a3c);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 70%);
  opacity: .5;
  z-index: 1;
}

/* ── Day dividers — parchment bookmark tabs ───────────────────── */
.activity-day-divider {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: .5rem;
  font-weight: 600;
  color: var(--wood-dark, #3a2415);
  padding: 6px 14px 6px 10px;
  margin: 10px 0 6px -18px;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.6;

  /* Parchment bookmark shape */
  background:
    linear-gradient(
      135deg,
      var(--gold, #daa520) 0%,
      var(--gold-bright, #f0c040) 50%,
      var(--gold, #daa520) 100%
    );
  border: 2px solid var(--wood, #6b4423);
  border-left: 4px solid var(--wood-dark, #3a2415);
  border-radius: 0 3px 3px 0;
  position: relative;
  z-index: 2;

  /* Pixel shadow beneath the tab */
  box-shadow:
    2px 2px 0 var(--wood-dark, #3a2415),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);

  width: fit-content;
  max-width: 80%;
}

/* Folded corner effect */
.activity-day-divider::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background: var(--wood, #6b4423);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ── Activity entries ─────────────────────────────────────────── */
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 3px;
  transition: all 180ms ease;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Vine node / dot connecting entry to the vine */
.activity-entry::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 18px;
  width: 7px;
  height: 7px;
  background: var(--gold, #daa520);
  border: 2px solid var(--wood, #6b4423);
  border-radius: 1px;
  z-index: 2;
  transition: all 180ms ease;
  box-shadow: 0 0 0 2px var(--panel, #2a1f14);
}

/* ── Hover: warm golden glow ──────────────────────────────────── */
.activity-entry:hover {
  background:
    linear-gradient(
      90deg,
      rgba(218, 165, 32, 0.06) 0%,
      rgba(218, 165, 32, 0.03) 100%
    );
  box-shadow:
    0 0 12px rgba(218, 165, 32, 0.08),
    inset 0 0 20px rgba(218, 165, 32, 0.03);
}

.activity-entry:hover::before {
  background: var(--gold-bright, #f0c040);
  box-shadow:
    0 0 6px rgba(218, 165, 32, 0.4),
    0 0 0 2px var(--panel, #2a1f14);
  transform: rotate(45deg);
}

/* ── Entry icons — pixel gem / orb ────────────────────────────── */
.activity-icon {
  font-size: .85rem;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background:
    linear-gradient(
      145deg,
      rgba(218, 165, 32, 0.15) 0%,
      rgba(218, 165, 32, 0.05) 100%
    );
  border: 2px solid var(--border-accent, rgba(218, 165, 32, 0.3));
  position: relative;
  image-rendering: pixelated;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 180ms ease;
}

/* Gem highlight (top-left sparkle) */
.activity-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
}

/* Type-based gem colours — apply via data-type or extra class */
.activity-icon[data-type="quest"],
.activity-icon.icon-quest {
  background: linear-gradient(145deg, rgba(90, 138, 60, 0.25), rgba(90, 138, 60, 0.08));
  border-color: var(--green, #5a8a3c);
}

.activity-icon[data-type="gold"],
.activity-icon.icon-gold {
  background: linear-gradient(145deg, rgba(218, 165, 32, 0.25), rgba(218, 165, 32, 0.08));
  border-color: var(--gold, #daa520);
}

.activity-icon[data-type="alert"],
.activity-icon.icon-alert {
  background: linear-gradient(145deg, rgba(200, 60, 60, 0.2), rgba(200, 60, 60, 0.06));
  border-color: var(--red, #c83c3c);
}

.activity-icon[data-type="info"],
.activity-icon.icon-info {
  background: linear-gradient(145deg, rgba(80, 140, 200, 0.2), rgba(80, 140, 200, 0.06));
  border-color: #508cc8;
}

.activity-icon[data-type="harvest"],
.activity-icon.icon-harvest {
  background: linear-gradient(145deg, rgba(200, 160, 40, 0.25), rgba(200, 160, 40, 0.08));
  border-color: var(--yellow, #c8a028);
}

/* ── Entry content ────────────────────────────────────────────── */
.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-action {
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.activity-time {
  font-size: .66rem;
  color: var(--muted);
  margin-top: 2px;
  font-family: var(--font-body, 'Inter', sans-serif);
  letter-spacing: .01em;
}

/* ── Category tags — coloured pixel gems ──────────────────────── */
.activity-tag {
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: .48rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
  background:
    linear-gradient(
      135deg,
      var(--gold-soft, rgba(218, 165, 32, 0.15)),
      rgba(218, 165, 32, 0.06)
    );
  color: var(--gold-bright, #f0c040);
  border: 2px solid var(--border-accent, rgba(218, 165, 32, 0.3));
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: relative;
  image-rendering: pixelated;
  box-shadow:
    1px 1px 0 var(--wood-dark, #3a2415);
}

/* Gem sparkle on tag */
.activity-tag::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
}

/* Tag colour variants */
.activity-tag[data-color="green"],
.activity-tag.tag-green {
  background: linear-gradient(135deg, rgba(90, 138, 60, 0.2), rgba(90, 138, 60, 0.06));
  color: var(--green, #5a8a3c);
  border-color: var(--green, #5a8a3c);
}

.activity-tag[data-color="yellow"],
.activity-tag.tag-yellow {
  background: linear-gradient(135deg, rgba(200, 160, 40, 0.2), rgba(200, 160, 40, 0.06));
  color: var(--yellow, #c8a028);
  border-color: var(--yellow, #c8a028);
}

.activity-tag[data-color="red"],
.activity-tag.tag-red {
  background: linear-gradient(135deg, rgba(200, 60, 60, 0.15), rgba(200, 60, 60, 0.04));
  color: var(--red, #c83c3c);
  border-color: var(--red, #c83c3c);
}

/* ── Hint text ────────────────────────────────────────────────── */
.activity-hint {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: .78rem;
  font-style: italic;
  position: relative;
}

.activity-hint::before {
  content: '~ ';
}

.activity-hint::after {
  content: ' ~';
}

/* ── "Turn page" load-more button ─────────────────────────────── */
.load-more-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  margin-top: 14px;
  border-radius: 2px;
  border: 2px solid var(--wood, #6b4423);
  background:
    linear-gradient(
      180deg,
      var(--panel-soft, #352a1e) 0%,
      var(--panel, #2a1f14) 100%
    );
  color: var(--gold, #daa520);
  font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: .52rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 220ms ease;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  overflow: hidden;
  box-shadow:
    2px 2px 0 var(--wood-dark, #3a2415),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Page curl decoration */
.load-more-btn::before {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(
      135deg,
      transparent 45%,
      var(--wood, #6b4423) 45%,
      var(--wood, #6b4423) 55%,
      var(--gold-soft, rgba(218, 165, 32, 0.2)) 55%
    );
  border-radius: 0;
}

/* Arrow indicators */
.load-more-btn::after {
  content: '  ▾ ▾ ▾';
  font-size: .4rem;
  opacity: .6;
}

.load-more-btn:hover {
  background:
    linear-gradient(
      180deg,
      rgba(218, 165, 32, 0.12) 0%,
      rgba(218, 165, 32, 0.04) 100%
    );
  color: var(--gold-bright, #f0c040);
  border-color: var(--gold, #daa520);
  box-shadow:
    0 0 10px rgba(218, 165, 32, 0.1),
    2px 2px 0 var(--wood-dark, #3a2415),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.load-more-btn:active {
  transform: translateY(1px);
  box-shadow:
    1px 1px 0 var(--wood-dark, #3a2415),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .activity-entry {
    gap: 10px;
    padding: 8px 10px 8px 14px;
  }

  .activity-icon {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Filters: horizontal scroll ── */
  .activity-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 4px;
    margin-bottom: 10px;
  }

  .activity-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.68rem;
  }

  .search-input {
    min-width: 120px;
    padding: 8px 10px;
    font-size: 0.72rem;
    min-height: 36px;
  }

  /* ── Activity list: compact timeline ── */
  .activity-list {
    padding-left: 14px;
  }

  .activity-list::before {
    left: 9px;
    width: 2px;
  }

  .activity-list::after {
    left: 7px;
    width: 6px;
    height: 6px;
  }

  /* ── Entries: more compact ── */
  .activity-entry {
    gap: 8px;
    padding: 8px 8px 8px 12px;
  }

  .activity-entry::before {
    left: -10px;
    top: 16px;
    width: 6px;
    height: 6px;
  }

  .activity-icon {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }

  .activity-action {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .activity-time {
    font-size: 0.6rem;
  }

  /* Tags: compact but still touchable */
  .activity-tag {
    font-size: 0.42rem;
    padding: 2px 6px;
    letter-spacing: 0.03em;
  }

  /* Day divider: compact */
  .activity-day-divider {
    font-size: 0.42rem;
    padding: 5px 10px 5px 8px;
    margin: 8px 0 4px -14px;
  }

  /* Load more button */
  .load-more-btn {
    padding: 12px 14px;
    font-size: 0.45rem;
    min-height: 44px;
    margin-top: 10px;
  }

  /* Hint text */
  .activity-hint {
    padding: 16px 12px;
    font-size: 0.72rem;
  }
}