.cao-infobox {
  font-size: 0.875rem;
}

.cao-infobox__sprite img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 45%, rgba(207, 164, 91, 0.15), transparent 70%);
  padding: 8px;
  border-radius: 8px;
}

.cao-infobox__sprite--npc img {
  width: 128px;
  height: 128px;
}

.cao-infobox__sprite--npc {
  overflow: hidden;
}

.cao-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(207, 164, 91, 0.3);
  background: rgba(207, 164, 91, 0.08);
  color: #EAD49F;
}

.cao-pill--untradable,
.cao-pill--members,
.cao-pill--aggressive {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.cao-pill--shards,
.cao-pill--pet {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

.cao-pill--multicombat {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.cao-coin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fcefd9 0%, #dcbf7b 45%, #996e37 100%);
  box-shadow:
    inset 0 0 0 1px rgba(61, 43, 22, 0.6),
    0 0 4px rgba(207, 164, 91, 0.5);
  flex-shrink: 0;
}

.cao-stat-bar {
  height: 6px;
  width: 100%;
  background: rgba(15, 18, 22, 0.7);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(67, 82, 93, 0.6);
}

.cao-stat-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #996e37, #dcbf7b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: width 0.3s ease;
}

.cao-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #F3F5F7;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2F3942;
  letter-spacing: 0.02em;
}

.cao-drops__bucket + .cao-drops__bucket {
  margin-top: 1.25rem;
}

.cao-drops__bucket-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #90A0AD;
  margin-bottom: 0.5rem;
}

.cao-drops__bucket-count {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  color: #5A6C79;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(67, 82, 93, 0.3);
  letter-spacing: 0;
}

.cao-drops__bucket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5A6C79;
  flex-shrink: 0;
}

.cao-drops__bucket--common .cao-drops__bucket-dot { background: #10b981; }
.cao-drops__bucket--uncommon .cao-drops__bucket-dot { background: #3b82f6; }
.cao-drops__bucket--rare .cao-drops__bucket-dot { background: #CFA45B; }
.cao-drops__bucket--unique .cao-drops__bucket-dot { background: #ef4444; }

.cao-drops__table-wrap,
.cao-dropped-by__table-wrap {
  overflow-x: auto;
  border: 1px solid #2F3942;
  border-radius: 8px;
  background: rgba(27, 33, 39, 0.5);
}

.cao-drops__table,
.cao-dropped-by__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cao-drops__th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #738694;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 18, 22, 0.55);
  border-bottom: 1px solid #2F3942;
}

.cao-drops__th--qty,
.cao-drops__th--rate {
  text-align: right;
}

.cao-drops__td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(47, 57, 66, 0.55);
  color: #CBD3DA;
  vertical-align: middle;
}

.cao-drops__td--qty,
.cao-drops__td--rate {
  text-align: right;
  white-space: nowrap;
  color: #EAD49F;
}

.cao-drops__row:last-child .cao-drops__td {
  border-bottom: none;
}

.cao-drops__row:hover .cao-drops__td {
  background: rgba(207, 164, 91, 0.04);
}

.cao-drops__td a {
  color: #DCBF7B;
  font-weight: 500;
  border-bottom: 1px solid rgba(207, 164, 91, 0.3);
  transition: all 0.15s ease;
}

.cao-drops__td a:hover {
  color: #F5E3BF;
  border-bottom-color: rgba(245, 227, 191, 0.8);
}

.cao-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 4px;
}

.cao-flag--rare {
  background: rgba(207, 164, 91, 0.15);
  color: #EAD49F;
  border: 1px solid rgba(207, 164, 91, 0.4);
}

.cao-flag--unique {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.cao-drops__notice {
  font-family: "EB Garamond", Georgia, serif;
}

.cao-dropped-by__empty {
  padding: 1rem;
  border: 1px dashed #2F3942;
  border-radius: 8px;
  background: rgba(27, 33, 39, 0.4);
  text-align: center;
}