/* workspace/starcode/css/cosmos-badges.css
   SC-BADGES (DESIGN_DECISIONS.md section 54): the shared detection-badge
   shapes js/badges.js builds. An element square is the periodic-table
   tile -- a bordered box, the element symbol large in the middle, the
   atomic number small in the top-left corner. A chip is a visibly
   different rounded capsule carrying a non-elemental detection word in
   its own color. Each chip kind's rgb triplet below matches CHIP_KINDS in
   js/badges.js exactly; tests/badges.test.js fails loud if they drift.
   Compounds stay plain text everywhere and have no rule here on purpose. */
/* BIGGER BADGES (owner playtest 2026-08-24): the element square is a 64px
   tile and the chip a 44px capsule -- the same numbers the canvas painters
   use (js/badges.js proportions on size 64, and scan-final-fx.js's
   BLOOM_BADGE_SIZE 64), so a bloom badge and a toast badge for the same
   detection are the same size on screen. Borders are 2px at 0.85 alpha and
   the symbol/label weight is 700 -- stronger, same palette. */
.badge-element {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 2px solid rgba(148, 163, 184, 0.85);
  background: rgba(8, 13, 26, 0.92);
  font-family: var(--font-data);
  color: #ffffff;
  letter-spacing: 0;
}
.badge-element-num {
  position: absolute;
  top: 5px;
  left: 6px;
  font-size: 13px;
  line-height: 1;
  color: rgba(148, 163, 184, 0.9);
}
.badge-element-sym {
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  margin-top: 5px;
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  flex: 0 0 auto;
  border-radius: 22px;
  border: 2px solid rgba(148, 163, 184, 0.85);
  background: rgba(8, 13, 26, 0.92);
  font-family: var(--font-data);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* One color line per chip kind -- the same numbers js/badges.js's
   CHIP_KINDS carries. */
.badge-chip-water { color: rgb(56, 189, 248); border-color: rgba(56, 189, 248, 0.85); }
.badge-chip-ordnance { color: rgb(248, 113, 113); border-color: rgba(248, 113, 113, 0.85); }
.badge-chip-unknown { color: rgb(148, 163, 184); border-color: rgba(148, 163, 184, 0.85); }
.badge-chip-data { color: rgb(167, 139, 250); border-color: rgba(167, 139, 250, 0.85); }
.badge-chip-salvage { color: rgb(250, 204, 21); border-color: rgba(250, 204, 21, 0.85); }
.badge-chip-biosignature { color: rgb(74, 222, 128); border-color: rgba(74, 222, 128, 0.85); }
.badge-chip-minerals { color: rgb(244, 114, 182); border-color: rgba(244, 114, 182, 0.85); }
.badge-chip-fuel { color: rgb(251, 146, 60); border-color: rgba(251, 146, 60, 0.85); }