/* Container to lay out card templates side-by-side */
.tlos-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* Header Banner across the top */
.tlos-header-banner {
  width: 100%;
  background-color: #000000;
  border-radius: 25px;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  color: #74bcee;
  border: 2px solid #74bcee;
  box-shadow: 0 0 10px #74bcee;
  margin-bottom: 16px;
}

/* Individual Card Container */
.tlos-pill-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  background-color: #000000;
  border-radius: 25px;
  padding: 12px;
  box-sizing: border-box;
  flex: 1 1 280px; /* Expands and sits side-by-side down to 280px minimum width */
  max-width: 350px; /* Keeps individual character cards from stretching endlessly on wide screens */
  color: #74bcee;
  border: 2px solid #74bcee;
  box-shadow: 0 0 10px #74bcee;
}

/* Sizing Helpers for Flexible Grid within Pills */
.tlos-pill {
  background: linear-gradient(to bottom, #1a1a1a, #000000);
  border: 1px solid #333333;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: inset 0 0 5px #000000;
  box-sizing: border-box;
  text-align: center;
}

.tlos-pill.flex-1 {
  flex: 1 1 calc(50% - 4px);
  min-width: 100px;
}

.tlos-pill.flex-full {
  flex: 1 1 100%;
}

/* Internal Text Styles */
.tlos-pill-label {
  font-size: 0.85em;
  border-bottom: 1px solid #222222;
  margin-bottom: 4px;
  padding-bottom: 2px;
  color: inherit;
  opacity: 0.9;
}

.tlos-pill-value {
  font-weight: bold;
  font-size: 1em;
  color: inherit;
}

.tlos-pill-formula {
  font-size: 0.75em;
  color: inherit;
  opacity: 0.8;
}

.tlos-pill-desc {
  font-size: 0.95em;
  color: inherit;
  line-height: 1.3;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333333 transparent;
}

/* Dynamic Color Themes */
.type-normal      { border-color: #a9a878; color: #a9a878; box-shadow: 0 0 10px #a9a878; }
.type-bug         { border-color: #a8b839; color: #a8b839; box-shadow: 0 0 10px #a8b839; }
.type-dark        { border-color: #ffffff; color: #ffffff; box-shadow: 0 0 10px #ffffff; }
.type-dragon      { border-color: #8c7ce6; color: #8c7ce6; box-shadow: 0 0 10px #8c7ce6; }
.type-electric    { border-color: #f7d031; color: #f7d031; box-shadow: 0 0 10px #f7d031; }
.type-fairy       { border-color: #ec99ac; color: #ec99ac; box-shadow: 0 0 10px #ec99ac; }
.type-fighting    { border-color: #bd3226; color: #ec99ac; box-shadow: 0 0 10px #bd3226; }
.type-fire        { border-color: #ed802f; color: #ed802f; box-shadow: 0 0 10px #ed802f; }
.type-flying      { border-color: #a08ec3; color: #a08ec3; box-shadow: 0 0 10px #a08ec3; }
.type-ghost       { border-color: #b3a3cc; color: #b3a3cc; box-shadow: 0 0 10px #b3a3cc; }
.type-grass       { border-color: #7cc252; color: #7cc252; box-shadow: 0 0 10px #7cc252; }
.type-ground      { border-color: #dfc069; color: #dfc069; box-shadow: 0 0 10px #dfc069; }
.type-ice         { border-color: #97d4d5; color: #97d4d5; box-shadow: 0 0 10px #97d4d5; }
.type-poison      { border-color: #cc58c7; color: #cc58c7; box-shadow: 0 0 10px #cc58c7; }
.type-psychic     { border-color: #f05887; color: #f05887; box-shadow: 0 0 10px #f05887; }
.type-rock        { border-color: #b79e37; color: #b79e37; box-shadow: 0 0 10px #b79e37; }
.type-steel       { border-color: #b8b8d0; color: #b8b8d0; box-shadow: 0 0 10px #b8b8d0; }
.type-water       { border-color: #6c8ec4; color: #6c8ec4; box-shadow: 0 0 10px #6c8ec4; }
.type-light       { border-color: #c8e9ff; color: #c8e9ff; box-shadow: 0 0 10px #c8e9ff; }
.type-temporal    { border-color: #56b3ff; color: #56b3ff; box-shadow: 0 0 10px #56b3ff; }
.type-spacial     { border-color: #9155ff; color: #9155ff; box-shadow: 0 0 10px #9155ff; }
.type-chaos       { border-color: #9955ff; color: #9955ff; box-shadow: 0 0 10px #9955ff; }
.type-spiritual   { border-color: #bec8d8; color: #bec8d8; box-shadow: 0 0 10px #bec8d8; }
.type-lifeform    { border-color: #64cbcb; color: #64cbcb; box-shadow: 0 0 10px #64cbcb; }
.type-destruction { border-color: #9933ff; color: #9933ff; box-shadow: 0 0 10px #9933ff; }
.type-shadow      { border-color: #bbbbbb; color: #bbbbbb; box-shadow: 0 0 10px #bbbbbb; }
.type-typeless    { border-color: #ff0000; color: #ff0000; box-shadow: 0 0 10px #ff0000; }