/*
 * technosphere_inventory.css - Inventory badges for Techno Fantasy spheres
 * Author:    Steven J. Cook (Shinra.Engineer)
 * Date:      2026-05-04
 * Time:      21:42 UTC
 * Model:     Claude Opus 4.7
 * Project:   Abyssal Engine Local Clone
 * Chat:      Abyssal Engine Deploy Debug + DEV Theme
 * Revision:  1.0.0
 *
 * Phase 2 of the Techno Fantasy Equip System rollout. inventory.js
 * v3.6.0 introduces mnemosphere and hoplosphere as native item
 * types. This stylesheet gives them visually distinct badges that
 * mirror the existing .inv-gadget-tag style so they fit the rest
 * of the inventory list at a glance.
 *
 * Color choices:
 *   .inv-mnemo-tag - cyan-purple (mind/class container connotation)
 *   .inv-hoplo-tag - green (parallel to player_resource_menu.js's
 *                    Atlas link styling, since hoplos are an Atlas
 *                    rule and the FAB's Atlas link is the same hue)
 *
 * Phase 3 will add the equipment-modal sphere management UI; that
 * UI gets its own CSS file (technosphere_equip.css) so this one
 * stays small and inventory-scoped.
 */

.inv-mnemo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: rgba(120, 100, 220, 0.12);
  border: 1px solid rgba(120, 100, 220, 0.3);
  color: #a797ff;
  font-size: 0.65em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: help;
}

.inv-hoplo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  font-size: 0.65em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: help;
}

@media (max-width: 640px) {
  .inv-mnemo-tag,
  .inv-hoplo-tag {
    font-size: 0.6em;
  }
}