/* 5-column scale so each dragon sits above its chunk */
.aware-heat-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  margin-top:10px;
  align-items:end;
  max-width: 441px;
}

.aware-heat-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* segment chunk */
.aware-heat-seg{
  width:100%;
  height:12px;
  border-radius:4px;
  opacity:.22;
  background: rgba(0,0,0,.1);
}

.aware-heat-seg.on{ opacity: 1; }

/* colours per segment */
.aware-heat-seg.seg-1{ background:#2bb673; }
.aware-heat-seg.seg-2{ background:#9bd93c; }
.aware-heat-seg.seg-3{ background:#f5a623; }
.aware-heat-seg.seg-4{ background:#f56b2a; }
.aware-heat-seg.seg-5{ background:#d0021b; }

/* icons (keep your existing styles; this just makes them feel aligned) */
.aware-spice-icon{
  width:80px;
  height:100px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity:.25;
  transform: translateY(0) scale(.96);
}
.aware-spice-icon.on{
  opacity:1;
  transform: translateY(0) scale(1);
}

@media (max-width: 870px) {
  .aware-spice-icon {
  	width: 60px;
    height: 70px;
  }
}

@media (max-width: 450px) {
  .aware-spice-icon {
  	width: 50px;
    height: 50px;
  }
}